尝试将child附加到具有相同类名的所有元素

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>