javascript - 尝试将子项附加到具有相同类名的所有元素

Question

我正在尝试使用 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()方法。

有没有人有这方面的经验？

Answer 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>