Question

我有一些<div>，我想在其中添加一些数据到具有特定类的子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

似乎您想向.left元素的item后代附加元素。在这种情况下，可以使用querySelector代替getElementsByClassName：

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

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

Answer 3

getElementsByClassName返回元素数组。因此，您需要为此使用索引。

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

这正在工作。我已经在您的小提琴中更新了代码。请检查

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

3 个答案: