Document.createElement(“br”)无法对appendChild进行多次调用

时间:2016-06-15 20:14:08

标签: javascript

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

3 个答案:

答案 0 :(得分: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">

答案 1 :(得分: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);

答案 2 :(得分:0)

您必须创建两个 <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);