<br>不附加到div

Question

ogres = document.getElementById('${contentID}') 

。

let prettify = streamArray[streamArray.length - 1].split(/--/), 
            layers = document.createTextNode(prettify[0]), 
            onions = document.createTextNode(prettify[1]), 
            breaking = document.createElement('br'); 

我有，我已经创建了名为prettify两个元素的数组。

我已经明确证实，prettify[0]和prettify[1]是我想要的元素，所以我让他们到onions和layers将被追加到div文本节点。

你会注意到我也有breaking这是我创建的一个break元素，也附加到div。

然后我有div，orges。

现在对于一些未知的原因，当我这样做：

ogres.appendChild(layers); 
ogres.appendChild(breaking); 
ogres.appendChild(onions); 
ogres.appendChild(breaking); 

HTML页面上，这是创建：

layersonions 
<br> 

1：这究竟是为什么

2：如何我是否修复它？

3：不，我不上保持这些变量名的计划，但它们很有趣：3

Answer 1

当您使用document.createElement('br');创建一个元素，它被追加为父母的第二个节点。

由于您再次使用相同的参考，它只是分离现有的元素，并将其添加到新的位置。

它是对元素的单一引用。要修复它，你将不得不动态地创建和追加一个元素。

ogres.appendChild(layers); 
ogres.appendChild(document.createElement('br')); 
ogres.appendChild(onions); 
ogres.appendChild(document.createElement('br')); 

appendChild

如果您仍然想使用变量引用，那么你可以使用cloneNode方法，将插入之前克隆现有节点。

ogres.appendChild(layers); 
ogres.appendChild(breaking); 
ogres.appendChild(onions); 
ogres.appendChild(breaking.cloneNode(false)); 

cloneNode