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

你不能重复使用相同的元素

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

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

Answer 2

这里的问题在于您创建的 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">

Answer 3

你必须创建 两个 <br>

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