新元素只追加到最后一个元素

Question

我有这个HTML:

<div id="p1">This is a paragraph.</div>
<hr>
<div id="p2">This is another paragraph.</div>

我想在所有div元素中添加一个元素

我写这个代码:

var forAppend = document.createElement("p");
forAppend.innerText = "This is NEW.";
var p1 = document.getElementById("p1");
p1.appendChild(forAppend);
var p2 = document.getElementById("p2");
p2.appendChild(forAppend);

你可以看到结果，只是附加到最后一个元素:

This is a paragraph.
--------------------------
This is another paragraph.
This is NEW.

jsfiddle

当我使用新变量定义元素，工作正常，见:

var forAppend = document.createElement("p");
forAppend.innerText = "This is NEW.";
var p1 = document.getElementById("p1");
p1.appendChild(forAppend);
var forAppend = document.createElement("p");
forAppend.innerText = "This is NEW.";
var p2 = document.getElementById("p2");
p2.appendChild(forAppend);

结果:

This is a paragraph.
This is NEW.
--------------------------
This is another paragraph.
This is NEW.

jsfiddle

1. 但是为什么会发生这种情况(只添加到最后一项)?
2. 以及如何编写更好和干净的代码(例如一个forAppendvar;也许可以从中得到一个实例)?

var forAppend = document.createElement("p");
forAppend.innerText = "This is NEW.";
var p1 = document.getElementById("p1");
p1.appendChild(forAppend);
var p2 = document.getElementById("p2");
p2.appendChild(forAppend);

<div id="p1">This is a paragraph.</div>
<hr>
<div id="p2">This is another paragraph.</div>

Answer 1

元素不能有两个父元素。(否则，DOM将不再具有树结构)

你要做的是创建一个元素，将它附加到p1然后你仍然有相同的元素，它现在是p1的子元素，并且说它必须在p2的末尾，所以在不久之后成为p1的子元素，它转换为p2的子元素。所以只有最后一个命令对我们是可见的，因为这发生得太快了。

解决方案:只需添加两个新元素。