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


Answers:


113

您可以使用.insertBefore()

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

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

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)

多田

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


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

大概是在写几乎没有依赖项的vanilla js,这使得扩展很不错。对于我们今天拥有的捆绑器和模块系统,可能最好使用公开这种功能的实用程序包。
伦纳德·保利
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.