JavaScript 中怎么使用 insertBefore 在指定节点前插入内容-js教程-PHP中文网

insertbefore 是 node 接口方法，用于在父节点指定子节点前插入新 dom 节点；不支持字符串，需先创建节点；referencenode 为 null 时等效 appendchild；已存在节点会被移动而非复制。

javascript 中怎么使用 insertbefore 在指定节点前插入内容

insertBefore 是 JavaScript 中 Node 接口的方法，用于在指定父节点的某个子节点**之前**插入一个新节点。它不支持直接插入字符串，必须传入一个有效的 DOM 节点（如元素、文本节点等）。

基本语法和参数说明

调用格式为：
parentNode.insertBefore(newNode, referenceNode)

parentNode：目标父元素（必须是已存在的 DOM 节点）
newNode：要插入的新节点（不能是字符串，需先创建）
referenceNode：作为参考位置的子节点；新节点将被插入到它前面；如果为 null，则等效于 appendChild（追加到最后）

常见用法示例

✅ 正确做法：先创建节点，再插入

// HTML: <div id="container">
<p>第一段</p>
<p>第二段</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review"><img
														src="https://img.php.cn/upload/skill/000/000/081/179084711841712.jpg" alt="Java Maven Code Review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="overflowclass">Java Maven Code Review</a>
													<p class="overflowclass">审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</div>
const container = document.getElementById('container');
const newP = document.createElement('p');
newP.textContent = '插入在最前';

// 插入到第一个 <p> 前面
const firstP = container.querySelector('p');
container.insertBefore(newP, firstP);
</p>

✅ 插入到末尾（传入 null）

const lastP = container.querySelector('p:last-child');
container.insertBefore(newP, null); // 等同于 container.appendChild(newP)

❌ 错误写法（会报错）：

container.insertBefore('<p>文本</p>', firstP); // TypeError：不是 Node 类型

插入文本内容的处理方式

如果想插入纯文本，需用 document.createTextNode() 或直接设置 textContent/innerText：

用文本节点：container.insertBefore(document.createTextNode('Hello'), firstP);
更常用的是创建元素后填内容：const span = document.createElement('span'); span.textContent = 'Hello'; container.insertBefore(span, firstP);