js中insert如何插入节点-js教程-PHP中文网

js中insert如何插入节点

冰川箭仙

发布： 2025-11-20 15:48:06

原创

125人浏览过

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

js中insert如何插入节点

在 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()：更灵活地插入元素

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

ChatX翻译

最实用、可靠的社交类实时翻译工具。支持全球主流的20+款社交软件的聊天应用，全球200+语言随意切换。让您彻底告别复制粘贴的翻译模式，与世界各地高效连接！

查看详情

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); // 插在目标元素后面