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

Question

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

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

Answer 1

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

---

.insertBefore()

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

在您的情况下，您可以按照 菲利克斯·克林回答

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 2

在特定索引处插入子节点

简化，

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)

Tada！

要注意扩展原生可能会很麻烦

Answer 3

您可以使用 .insertBefore() ：

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