javascript - 使用动态 id 更改按钮的内部 HTML

Question

在我正在处理的一个项目中，一个 HTML 文件定义了一个用于选择按钮的 Javascript 模板。所有按钮都有一个我想本地化(动态设置)的“更改...”标签。在其他情况下，我正在搜索元素 ID 并相应地设置 InnerHTML。但在这种情况下，按钮的 ID 是动态定义的。是否可以在按钮元素内有一个文本元素，搜索该元素并设置其 InnerHTML 值？

<script id="optionSelectionTemplate" type="text/x-handlebars-template">
    <div class="sub-section option-selection">
        {{#if name}}<h4>{{name}}</h4>{{/if}}
        <div class="current"></div><button class="button" id="{{id}}" data-action-id="{{id}}">Change...</button>
    </div>
</script>

我已经搜索了一段时间了。但是考虑到我的专长不是网络开发，我不太确定要搜索什么...

Answer 1

您可以改为通过其类获取按钮元素；例如:

var x = document.getElementsByClassName("button");

正如您所建议的，您可以通过首先获取“optionSelectionTemplate”元素来提高选择的精度，如下所示:

var x = document.getElementById("optionSelectionTemplate").getElementsByClassName("button");

或者如果你愿意:

var x = document.getElementById("optionSelectionTemplate").getElementsByTagName("button");

以下是有关这些方法的更多信息的一些链接: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp