尝试将子级附加到具有相同类名的所有元素答案

【问题标题】：Trying to append child to all elements with same class name尝试将子级附加到具有相同类名的所有元素
【发布时间】：2017-11-03 04:09:08
【问题描述】：

我正在尝试使用appendChild() 方法将document.createElement("div") 元素添加到具有相同类名的多个<div> 元素中。

我试过这种方式：

const childElement = document.createElement("div");
childElement.className = "second";
const parentObject = document.getElementsByClassName("first");

[...parentObject].map(parent => parent.appendChild(childElement))

哪个没用，所以我尝试了：

for(let i = 0; i < parentObject.length; i++){
  parentObject[i].appendChild(childElement);
}

唯一可行的方法是我自己编写 html 元素，然后将其添加到每个父级的 innerHTML：

[...parentObject].map(parent => parent.innerHTML = "<div class='second'></div>")

但由于我要生成所有不同类型的 HTML 元素标签，例如 IMG, DIV, SPAN，我需要方便地调用 createElement() 方法。

有人有这方面的经验吗？

【问题讨论】：

您想附加多个元素。为您要添加到的每个父级创建一个。

标签： javascript html ecmascript-6

【解决方案1】：

一个元素只能存在于 DOM 中的一个位置。您需要做的是创建一个新元素以附加到每个父级：

const parentObject = document.getElementsByClassName('first');

[...parentObject].forEach((parent, i) => {
  const childElement = document.createElement('div');
  childElement.className = 'second';
  childElement.innerHTML = `second ${i}`;
  parent.appendChild(childElement)
});

div { padding: 5px; }
.first { background-color: pink; display: inline-block; }
.second { background-color: lightblue; }

<div class="first">first</div>
<div class="first">first</div>
<div class="first">first</div>
<div class="first">first</div>

【讨论】：

不要做那个奇怪的[...parentObject].map，只需使用for (const parent of parentObject) {循环
@GabyakaG.Petrioli 同意。很快NodeList.prototype.forEach 将得到广泛支持，并且没有必要。
@GabyakaG.Petrioli 是的，但它效率低下、误导和不必要。当不想创建数组时，也不应该使用map。只需使用简单的命令式循环而不是回调。
我只是习惯了映射，因为我在我的 JS 类中使用了很多继承并且不想使用 foreach，因为我不得不 bing this
@Jousi 你似乎在某个地方误会了。 map 和 forEach 具有相同的 this 语义。从字面上看，两者之间的唯一区别是map 返回一个新数组，forEach 返回undefined。