JavaScript element.before()
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 element.before() 方法。此方法允许开发人员将节点插入到 DOM 树中的指定元素之前，从而实现灵活的元素操作。
基本定义
element.before() 方法会在调用它的元素之前插入一组 Node 或 DOMString 对象。这些对象被插入为该元素的先前同级元素。
此方法是现代 DOM 操作 API 的一部分，提供了比 insertBefore 等传统方法更简洁的替代方案。它可以接受多个参数，并按顺序将它们插入到目标元素之前。
基本的 element.before()
此示例演示了如何将一个简单元素插入到另一个元素之前。
<!DOCTYPE html>
<html>
<head>
<title>Basic element.before</title>
</head>
<body>
<div id="target">Target Element</div>
<script>
const target = document.getElementById('target');
const newElement = document.createElement('p');
newElement.textContent = 'New Element';
target.before(newElement);
</script>
</body>
</html>
在此基本示例中，我们创建一个新的段落元素，并使用 element.before() 将其插入到目标 div 之前。新元素成为目标元素的先前同级元素。
这演示了 element.before() 的基本用法，用于将新内容插入 DOM。该方法直接修改 DOM 结构，无需显式访问父元素。
插入多个元素
此示例展示了如何将多个元素插入到目标元素之前。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Elements</title>
</head>
<body>
<div id="target">Target Element</div>
<script>
const target = document.getElementById('target');
const element1 = document.createElement('span');
element1.textContent = 'First ';
const element2 = document.createElement('span');
element2.textContent = 'Second ';
target.before(element1, element2, 'Text Node');
</script>
</body>
</html>
在这里，我们创建了两个 span 元素和一个文本节点，然后使用单个 before() 调用将这三个元素全部插入到目标元素之前。这些元素按照作为参数提供的顺序插入。
这展示了 element.before() 一次处理多个插入的能力。该方法同时接受元素节点和文本字符串，后者会自动转换为文本节点。
插入现有元素
此示例演示了如何将现有元素移动到新位置。
<!DOCTYPE html>
<html>
<head>
<title>Moving Elements</title>
</head>
<body>
<div id="container">
<p id="paragraph">Existing Paragraph</p>
<div id="target">Target Element</div>
</div>
<script>
const target = document.getElementById('target');
const paragraph = document.getElementById('paragraph');
target.before(paragraph);
</script>
</body>
</html>
在此示例中，我们将现有的段落元素移动到目标 div 之前。before() 方法会在将元素插入新位置之前自动将其从当前位置移除。
这表明 element.before() 可用于重新组织现有的 DOM 元素。该方法会自动处理移除和重新插入过程，从而简化了 DOM 操作。
与模板字面量结合使用
此示例展示了如何将模板字面量与 element.before() 结合使用。
<!DOCTYPE html>
<html>
<head>
<title>Template Literals</title>
</head>
<body>
<div id="target">Target Element</div>
<script>
const target = document.getElementById('target');
const userName = 'John Doe';
target.before(`<p>Welcome, ${userName}!</p>`);
</script>
</body>
</html>
在这里，我们使用模板字面量动态创建 HTML 内容，然后将其插入到目标元素之前。浏览器会自动将该字符串转换为 DOM 节点。
这展示了 element.before() 如何与动态生成的内容协同工作。该方法会解析 HTML 字符串并插入生成的节点，使其在模板场景中非常有用。
插入带有事件监听器的元素
此示例展示了如何将带有事件监听器的元素插入到目标元素之前。
<!DOCTYPE html>
<html>
<head>
<title>Event Listeners</title>
</head>
<body>
<div id="target">Target Element</div>
<script>
const target = document.getElementById('target');
const button = document.createElement('button');
button.textContent = 'Click Me';
button.addEventListener('click', () => {
alert('Button clicked!');
});
target.before(button);
</script>
</body>
</html>
在此示例中，我们创建一个按钮元素，为其附加一个点击事件监听器，然后使用 before() 将其插入到目标元素之前。
这表明可以在将事件监听器附加到元素并将其插入 DOM 之前进行。一旦元素插入到文档中，监听器就能正常工作。
来源
在本文中，我们展示了如何在 JavaScript 中使用 element.before()。此方法提供了一种现代、便捷的方式，可以在 DOM 中的现有元素之前插入内容。
作者
列出 所有 JS DOM 教程。