新元素仅附加到最后一个元素

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

但为什么会这样（只添加到最后一项）？
以及如何编写更好、更干净的代码（例如使用一个 forAppend var；也许可以从中获取一个实例）？

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

一个元素不能包含两个 parents。（否则，DOM 将不再具有树结构）

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

解决方案：添加两个新元素即可。

新元素仅附加到最后一个元素

The new element only append to the last element

html

javascript

dom

element

append