javascript - Document.createElement ("br") 无法多次调用 appendChild

Question

HTML

var x = document.createElement("p");
var br1 = document.createElement('br');
var br2 = document.createElement('br');
var t5 = document.createTextNode("CSE");
var t6 = document.createTextNode("EEE");
x.appendChild(t5);
x.appendChild(br1);
x.appendChild(t6);
x.appendChild(br2);

document.getElementById("new").appendChild(x);

输出应该是这样的

CSE

EEE 

但现在输出是CSEEEE

Answer 1

此处的问题与您创建的 br 元素有关。它是独一无二的。所以一开始当你将它附加到它在 DOM 中的位置时，它位于 t5 和 t6 元素之间。但是，当您第二次附加 br 元素时，它会将其放置在 DOM 中的不同位置，这就是为什么您会看到 CSEEEE 的结果后跟仅 1 个 br 元素。

您应该省略最后一个，或者克隆 br 元素。

var x = document.createElement("p");
var br = document.createElement('br');
var t5=document.createTextNode("CSE");
var t6=document.createTextNode("EEE");
x.appendChild(t5);
x.appendChild(br);
x.appendChild(t6);
x.appendChild(br.cloneNode());

document.getElementById("new").appendChild(x);

<div id="new">