Question

所以我正在学习操纵Dom元素和添加节点。

我使用这个js代码：

var parent = document.getElementById('div2');
var newNode = document.createElement('p');
var text = document.createTextNode('Text Node!');
newNode.appendChild(text);
parent.insertBefore(newNode, parent.childNodes[4]);

这是我在通常的vanilla设置中的html：

<div id="div2">    
    <p> abc </p>
    <p> cde </p>
    <p> efg </p>
    <p> ghi </p>    
</div>

输出是这样的：

abc
cde
Text Node!
efg
ghi

这不是错误的地方吗？在插入之前，这个insertBefore是childNode [2]吗？出于某种原因，当我更改childNode之后的数字时，文本没有显示在我预期的位置？这是为什么？节点是否仍然从0开始......就像数组一样？另一个例子，使用childNode [6]将它放在efg之后。我认为应该是insertBefore childNode [3]。

我知道问题可能是基本的，但我无法弄清楚原因。谢谢！

Answer 1

childNodes包含Text个节点（以及评论节点等，但您没有这些节点）。在HTML中，元素之间的空格是Text个节点，因此div2具有：

索引0：带有换行符和一些空格或制表符的Text节点
索引1：第一段的Element节点（包含带Text的{{1}}节点）
索引2：带有换行符和一些空格或制表符的" abc "节点
索引3：第二段的Text节点（包含带Element的{{1}}节点）
索引4：带有换行符和一些空格或制表符的Text节点
索引5：第三段的" cde "节点（包含带Text的{{1}}节点
索引6：带有换行符和一些空格或制表符的Element节点
索引7：第四段的Text节点（包含带有" efg "的{{1}}节点）
索引8：带有换行符和一些空格或制表符的Text节点

直播示例：

＆＃13;

Element

＆＃13;

Text

＆＃13;

在现代浏览器中，您可以使用" ghi "代替，其中只包含元素，而不是其他类型的节点。

在Javascript中添加节点之前的兄弟节点

1 个答案: