附录只适用于最后一个元素

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

你需要使用元素<p>的cloneNode，因为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>

Answer 2

您的<p>元素仅附加到最后一个元素，因为它已分配给myElement变量。而且由于该变量是在循环之前声明的，因此每次迭代都会将<p>标签移动到所有<div.foo>。

但是，如果您在for循环中声明您的段落，则会创建一个新段落并将其附加到每个块中，因为存在所有不同的元素。

let eles = document.getElementsByClassName("foo");
for (i = 0; i < eles.length; i++) {
  let myElement = document.createElement("p");
  myElement.innerText = 'I am a paragraph.';
  eles[i].appendChild(myElement);
}

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