使用javascript在具有唯一ID的html标签标签中显示数组中的文本

Question

我是 javascript 新手， 我有以下 html 代码：

<form role="form" >       
<label for="element1" id="element1_label"></label>
<input type="text" id="element1" />

<label for="element2" id="element2_label"></label>
<input type="text" id="element2" name="element2">

<label for="element3" id="element3_label"></label>
<input type="number" id="element3" name="element3s">

<button type="submit" >submit</button>

我想通过以下javascript代码显示options数组中的一些文本：

       var piced = 'opt';
        var options = {
            opt: {
                element1_label: "text1",
                element2_label: "text2",
                element3_label: "text3",
            },
            newopt: {
                element1_label: "new text1",
                element2_label: "new text2",
                element3_label: "new text3",
            }
        };

        jQuery('label').each(function()
        {
            jQuery(this).innerText = options[piced][jQuery(this).attr('id')];

        });

我想在 piced 数组的此类索引的每个 html 标签值中显示。 例如：

<label for="element1" id="element1"> text1 </label>
<input type="text" id="element1" />

<label for="element2" id="element2"> text2 </label>
<input type="text" id="element2" name="element2">

但是这段代码并没有改变标签标签的文本。有什么问题？

Answer 1

innerText 是本机属性，而不是 jQuery 属性。 jQ 等效的是text() 方法。更改为：

 jQuery(this).text(options[piced][jQuery(this).attr('id')]);

或（从 jQuery 堆栈中检索本机元素引用）

jQuery(this)[0].innerText = options[piced][jQuery(this).attr('id')];

Answer 2

这是一个普通的 Javascript 方法，它遍历标签并将每个标签的 textContent (labels[i].textContent) 写为：

options[piced][labels[i].id];

var piced = 'opt';

var options = {
    
    opt: {
        element1_label: "text1",
        element2_label: "text2",
        element3_label: "text3",
    },

    newopt: {
        element1_label: "new text1",
        element2_label: "new text2",
        element3_label: "new text3",
    }

};

var labels = document.getElementsByTagName('label');

for (var i = 0; i < labels.length; i++) {
    labels[i].textContent = options[piced][labels[i].id];
}

<form role="form" >       
<label for="element1" id="element1_label"></label>
<input type="text" id="element1" />

<label for="element2" id="element2_label"></label>
<input type="text" id="element2" name="element2">

<label for="element3" id="element3_label"></label>
<input type="number" id="element3" name="element3">

<button type="submit" >submit</button>

---

注意我不会说永远不要使用innerText - 但知道@987654329 很重要 @ 是标准的 javascript 而innerText 是非标准的（最初是 Internet Explorer 引入的专有属性，后来被 WebKit、Blink 和 Opera 采用）。

请参阅这篇 2015 年的博文：

• Node.textContent (2015) Mozilla 开发者网络
• The poor, misunderstood innerText (2015) by kangax

全面掌握textContent和innerText的区别。

---

跨浏览器解决方案（处理旧版本的 IE）当然是：

var text = element.textContent || element.innerText;