Appendchild 仅适用于最后一个元素

Question

我正在尝试在 JavaScript 中创建一个元素并按类名将其应用于所有元素。对于这个例子，我将使用一个段落来方便。然而，通过 JavaScript 创建一个元素的目的是因为我想稍后在我的代码中创建一个不同的元素。

在我使用的代码中，只有元素数组的最后一个元素将包含由 JavaScript 创建的元素。谁能解释为什么会发生这种情况以及我可以根据我的要求做些什么来解决问题？我试图在另一个元素中应用整个元素（所以不仅仅是段落元素的值或属性）。

我的代码：

//Creating my element:
let myElement = document.createElement("p");
/*let text = document.createTextNode("test");
myElement.appendChild(text);*/ //<-- Enable following to see text in result or check developer console for added paragraphs

//Single example:
let ele = document.getElementById("bar");
ele.appendChild(myElement);

//Not working...:

//Now class:
let eles = document.getElementsByClassName("foo");
for (i = 0; i < eles.length; i++) {
  //eles[i].innerHTML = "abc";//<-- Does work (but hardcoded)?
  //eles[i].innerHTML = myElement;//<-- returns "[object HTMLParagraphElement]"?
  eles[i].appendChild(myElement); //<!-- Does work only for last element in array?
}

<div class="foo" id="bar">

</div>
<div class="foo">

</div>

<div class="foo">

</div>

<div class="foo">
  <!-- Only this one will obtain the the paragraph element? -->
</div>

JSFiddle

Answer 1

您需要使用cloneNodeelement <p>，因为appendChild将其从当前位置移动到新位置。查看文档

//Creating my element:
const myElement = document.createElement("p");
myElement.innerHTML = 'paragraph';

//Single example:
const ele = document.getElementById("bar");
ele.appendChild(myElement.cloneNode(true));

//Now class:
const eles = document.getElementsByClassName("foo");
for (let i = 0; i < eles.length; i++) {
  eles[i].appendChild(myElement.cloneNode(true));
}

.foo {
   border: 1px solid #333;
}

.foo p {
  font-weight: bold;
}

<div class="foo" id="bar">
  bar:
</div>
<div class="foo">
  foo1
</div>
<div class="foo">
  foo2
</div>
<div class="foo">
  foo3
</div>