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。

- Shakib Ahmed

---

可能是如何使用JavaScript插入换行符？的重复问题。 - ConnorCMcKee

类似问题的答案：“如果你调用 appendChild 并传递一个已经在 DOM 中的元素，它会被移动而不是复制。”（如何使用 appendChild 添加多个 div？） - user2314737

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

- Travis J

Answer 2

您不能重复使用同一个元素

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

- lem2802

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

- user3589620