向同一类的所有div添加子元素

Question

我正在尝试向具有同一类的所有 div 添加子范围。

我可以通过定位单个元素的 Id 来实现此目的

超文本标记语言

<div id="h1" class="header">Hello </div>
<hr>
<div id="h2" class="header">what about this one </div>

JavaScript

var header = document.getElementById('h1');

var newSpan = document.createElement("span");
header.appendChild(newSpan);
newSpan.innerHTML = "i'm here";

但是当我将其更改为

var header = document.getElementsByClassName('header');

它无法工作。

谁能看到我哪里出错了？

JSFiddle

Answer 1

为此，您需要迭代它们，因为getElementsByClassName()返回一个类似于 html 元素集合的数组。您可以使用for循环

var headers = document.getElementsByClassName('header');

for (var i = 0; i < headers.length; i++) {
  var newSpan = document.createElement("span");
  newSpan.innerHTML = "i'm here";
  headers[i].appendChild(newSpan);
}

<div id="h1" class="header">Hello</div>
<hr>
<div id="h2" class="header">what about this one</div>

或者你可以使用Array.prototype.forEachwithcall()来迭代它

var headers = document.getElementsByClassName('header');

[].forEach.call(headers,function(ele) {
  var newSpan = document.createElement("span");
  newSpan.innerHTML = "i'm here";
  ele.appendChild(newSpan);
})

<div id="h1" class="header">Hello</div>
<hr>
<div id="h2" class="header">what about this one</div>

有关迭代检查的更多信息：- HTMLCollection 元素的 For 循环