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

72

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

我想将childNode添加到div中的第3个位置。它后面还有其他节点需要向后移动（3变为4，依此类推）

javascript dom parent-child

— 耶尔科
source

2

的insertBefore

— 森那维达斯

113

您可以使用.insertBefore()：

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

— 费利克斯·克林
source

11

你能解释为什么你选择去parentElement.children而不是parentElement.childNodes？前者仅列出了Elements的子节点，因此忽略了s的节点Text，例如……假设子节点可以包括所有类型的节点，这会更好吗？

— 麦克啮齿动物

@mikerodent例如，当您使用<li>有序列表中的列表项时<ol>，您不希望将空格缩进算作子级（假设HTML文档很漂亮）。

— Yeti

1

在子节点上使用childNodes是正确的方法。

— brainkim

32

为此，您有3个选项.insertBefore（）、. insertAdjacentElement（）或.insertAdjacentHtml（）

.insertBefore()

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

在您的情况下，您可以按照Felix Kling的回答进行操作

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>");

— 毛里西奥·朱安斯
source

9

在特定索引处插入子节点

简化的

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)

多田

注意扩展本地人可能会遇到麻烦

— 伦纳德·保利
source

为什么要给出警告而不是仅仅编写可以通过父节点调用的泛型函数？

— jonschlinkert

大概是在写几乎没有依赖项的vanilla js，这使得扩展很不错。对于我们今天拥有的捆绑器和模块系统，可能最好使用公开这种功能的实用程序包。

— 伦纳德·保利