JS插入节点方法详解

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JS中insert插入节点方法》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

答案：JavaScript通过insertBefore()在指定节点前插入，或用insertAdjacentElement()按位置字符串插入，还可封装insertAfter()实现后插。

在 JavaScript 中，想要插入节点，通常使用 insertBefore() 或结合父元素操作来实现“插入”效果。JS 原生没有直接叫 insert 的方法，但可以通过以下方式在指定位置插入节点。

1. insertBefore()：在某个子节点前插入新节点

这是最常用的插入节点方法，语法如下：

parentElement.insertBefore(newNode, referenceNode);

说明：

• newNode：要插入的新节点
• referenceNode：作为参照的节点，新节点会插入到它前面
• 如果 referenceNode 为 null 或 undefined，则新节点会被添加到子节点末尾（等同于 appendChild）

示例：

const parent = document.getElementById('parent');
const newPara = document.createElement('p');
newPara.textContent = '我是新插入的段落';

const refChild = document.getElementById('target');
parent.insertBefore(newPara, refChild); // 插入到 target 元素之前

2. 使用 insertAdjacentElement()：更灵活地插入元素

这个方法可以直接在某个元素的周围插入新元素，语法：

element.insertAdjacentElement(position, element);

常用 position 值：

• 'beforebegin'：插入当前元素前面（作为兄弟节点）
• 'afterbegin'：插入当前元素内部第一个子节点之前
• 'beforeend'：插入当前元素内部最后一个子节点之后（等同于 appendChild）
• 'afterend'：插入当前元素后面（作为兄弟节点）

示例：

const target = document.getElementById('target');
const newDiv = document.createElement('div');
newDiv.textContent = '新元素';

target.insertAdjacentElement('afterend', newDiv); // 插在目标元素后面

3. 利用 parentNode 和 nextSibling 模拟“插入到某元素后”

如果没有直接的“insertAfter”，可以自己封装：

function insertAfter(newNode, existingNode) {
 const parent = existingNode.parentNode;
 if (parent.lastChild === existingNode) {
  parent.appendChild(newNode);
 } else {
  parent.insertBefore(newNode, existingNode.nextSibling);
 }
}

调用：

insertAfter(newPara, document.getElementById('target')); 基本上就这些常用方式。insertBefore 是基础，insertAdjacentElement 更直观灵活，按需选择即可。

终于介绍完啦！小伙伴们，这篇关于《JS插入节点方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！