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

Question

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

我想将一个childNode添加到div中的第3个位置.它背后还有其他节点需要向后移动(3变为4等)

Answer 1

你可以使用.insertBefore():

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

Answer 2

为此,您有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>");

Answer 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)

田田!

请注意扩展本机可能会很麻烦