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>元素仅附加到最后一个元素，因为它已分配给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>

Answer 2

您需要使用元素cloneNode的{{1}}，因为<p>会将其从当前位置移动到新位置。参见documentation

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;
}

Appendchild仅适用于最后一个元素

2 个答案: