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

您需要使用 cloneNode元素 <p> , 因为 appendChild将其从当前位置移动到新位置。见 documentation

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