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

Posted 2023-02-19

【中文标题】如何将子节点附加到特定位置

【英文标题】：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，几乎没有依赖项，这使得扩展很好。使用我们今天拥有的捆绑器和模块系统，公开此类功能的实用程序包可能会更可取。