DOM 中的 innerHTML

Question

我无法使用此脚本更改 'p' 标签内的文本

 <script>
 var firstItem = document.getElementByTagName('p');
 firstItem.innerHTML = 'Adding Javascript';
 </script>

Answer 1

您有几个编码错误。这是一些更正后的代码：

 <script>
 var firstItem = document.getElementsByTagName('p')[0];
 firstItem.innerHTML = 'Adding Javascript';
 </script>

正确的方法是document.getElementsByTagName('p')。请注意 "Elements" 末尾的 "s"。
然后，因为 document.getElementsByTagName('p') returns 一个 HTML 集合对象，您必须遍历集合或进入集合以获取特定的 DOM 对象（我在示例中使用 [0]）。

这是一个有效的代码片段：

// change just the first <p> tag
document.getElementById("test1").addEventListener("click", function(e) {
    var firstItem = document.getElementsByTagName('p')[0];
    firstItem.innerHTML = 'Adding Javascript';
});

// change all the <p> tags
document.getElementById("test2").addEventListener("click", function(e) {
    var items = document.getElementsByTagName('p');
    for (var i = 0; i < items.length; i++) {
      items[i].innerHTML = 'Setting All Items';
    }
});

<button id="test1">Change text of first item</button><br><br>
<button id="test2">Change text of all items</button><br><br>
<p>This is some text</p>
<p>This is more text</p>
<p>This is and more text</p>

DOM 中的 innerHTML

innerHTML in DOM

javascript

dom

innerhtml