如何将子节点附加到特定位置答案

【问题标题】：How to append a childnode to a specific position如何将子节点附加到特定位置
【发布时间】：2011-08-18 11:22:05
【问题描述】：

如何将 childNode 附加到 javascript 中的特定位置？

我想将 childNode 添加到 div 的第三个位置。它后面还有其他节点需要向后移动（3变成4等等）

【问题讨论】：

insertBefore

【解决方案1】：

你可以使用.insertBefore():

parentElement.insertBefore(newElement, parentElement.children[2]);

【讨论】：

你能解释一下你为什么选择parentElement.children而不是parentElement.childNodes吗？前者仅列出 Elements 的子节点，因此忽略 Texts 的节点，例如...假设子节点可能包含所有类型的节点不是更好吗？？？跨度>
@mikerodent 例如，当您在有序列表<ol> 中使用列表项<li> 时，您不希望将空格缩进算作子项（假设HTML文件很漂亮）。
在子节点上使用 childNodes 是正确的方法。

【解决方案2】：

为此，您有 3 个选项 .insertBefore()、.insertAdjacentElement() 或 .insertAdjacentHtml()

.insertBefore()

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

在你的情况下，你可以像 Felix Kling answer 那样做

var insertedElement = parentElement.insertBefore(newElement, parentElement.children[2]);

.insertAdjacentElement()

referenceElement.insertAdjacentElement (where, newElement);

在你的情况下是

parentElement.children[1].insertAdjacentElement("afterEnd", newElement);

.insertAdjacentHTML()

referenceElement.insertAdjacentElement (where, newElementHTML);

在你的情况下是

parentElement.children[1].insertAdjacentElement("afterEnd", "<td>newElementHTML</td>");

【讨论】：

【解决方案3】：

在特定索引处插入子节点

简化，

Element.prototype.insertChildAtIndex = function(child, index) {
  if (!index) index = 0
  if (index >= this.children.length) {
    this.appendChild(child)
  } else {
    this.insertBefore(child, this.children[index])
  }
}

那么，

var child = document.createElement('div')
var parent = document.body
parent.insertChildAtIndex(child, 2)

多田！

在扩展原生代码时要注意could be troublesome

【讨论】：

为什么要给出警告而不是只写一个可以用父节点调用的通用函数？
当时可能主要写的是 vanilla js，几乎没有依赖项，这使得扩展很好。使用我们今天拥有的捆绑器和模块系统，公开此类功能的实用程序包可能会更可取。