在 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]);

这是我的 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 节点 " abc "）
索引 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，它只包含元素，不包含其他类型的节点。

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

Adding node before sibling in Javascript

javascript

dom

nodes