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，它们是要附加到文本节点的文本节点格。

你会注意到我也有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

<br/>没有附加到div

1 个答案: