javascript - 在 Javascript 中在同级之前添加节点

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 节点(其中包含带有 “abc” 的 Text 节点)
• 索引 2:带有换行符和一些空格或制表符的 Text 节点
• 索引 3:第二段的 Element 节点(其中包含带有 “cde” 的 Text 节点)
• 索引 4:带有换行符和一些空格或制表符的 Text 节点
• 索引 5:第三段的 Element 节点(其中包含带有 “efg” 的 Text 节点)
• 索引 6:带有换行符和一些空格或制表符的 Text 节点
• 索引 7:第四段的 Element 节点(其中包含带有 “ghi” 的 Text 节点)
• 索引 8:带有换行符和一些空格或制表符的 Text 节点

实例:

var div2 = document.getElementById("div2");
var index, child;
snippet.log("div2's child node types:");
for (index = 0; index < div2.childNodes.length; ++index) {
  child = div2.childNodes[index];
  snippet.log(index + ": " + nodeTypeName(child.nodeType));
}

// Type values from http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558
function nodeTypeName(type) {
  switch (type) {
    case 1:  return "ELEMENT_NODE";
    case 2:  return "ATTRIBUTE_NODE";
    case 3:  return "TEXT_NODE";
    case 4:  return "CDATA_SECTION_NODE";
    case 5:  return "ENTITY_REFERENCE_NODE";
    case 6:  return "ENTITY_NODE";
    case 7:  return "PROCESSING_INSTRUCTION_NODE";
    case 8:  return "COMMENT_NODE";
    case 9:  return "DOCUMENT_NODE";
    case 10: return "DOCUMENT_TYPE_NODE";
    case 11: return "DOCUMENT_FRAGMENT_NODE";
    case 12: return "NOTATION_NODE";
    default:
      return "Unknown node type";
  }
}

<div id="div2">    
    <p> abc </p>
    <p> cde </p>
    <p> efg </p>
    <p> ghi </p>    
</div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

在现代浏览器上，您可以使用 children 来代替，它只包含元素，而不包含其他类型的节点。