<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，这是我创建的中断元素，它也附加到 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

<br> 未附加到 div

<br> not being appended to div

html

javascript

appendchild