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 перемещает его из текущей позиции в новую.См. документацию

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