Javascript如何将元素附加到具有特定类的div

Question

我有一些<div> s，我想将一些数据附加到具有特定类的子 div 中，但我不知道该怎么做：

这是我的 JS 代码：

let items = document.querySelectorAll(".item");
items.forEach(function (item) {

  let textnode = document.createElement('p');
  textnode.innerHTML = 'some text';
  item.appendChild(textnode);
});

这实际上有效，但它只会将“textnode”元素附加到现有元素。

当我尝试：

document.getElementsByClassName('left').appendChild(textnode);

它不起作用。

这是一个JSFIDDLE

编辑

我想将数据附加到.left元素

Answer 1

getElementsByClassName返回多个元素。 类名不是唯一的。 因此，您首先需要在该列表中选择一个元素。

 var textnode = document.createTextNode("Test"); var node = document.getElementsByClassName('left'); node[0].appendChild(textnode);

 <div class="left"></div>

Answer 2

似乎您想将一个元素附加到item元素的.left后代。 如果是这种情况，您可以使用querySelector而不是getElementsByClassName ：

item.querySelector('.left').appendChild(textnode);

请注意，上面的代码调用querySelector方法作为item的成员（HTMLDivElement接口的实例）。

Answer 3

getElementsByClassName 返回元素数组。 所以你需要使用索引。

let x = document.getElementsByClassName('left')
x[0].appendChild(textnode)

这是有效的。 我已经更新了你的小提琴中的代码。 请退房