摘要：在本教程中，您将学习如何使用 JavaScript before() 方法在元素之前插入节点。
JavaScript before() 方法简介
element.before() 方法允许您在 element 之前插入一个或多个节点。以下是 before() 方法的语法：
Element.before(node)Code language: JavaScript (javascript)在此语法中，before() 方法将节点插入 DOM 树中的 Element 之前。
例如，假设您有一个 <p> 元素，您想在其之前插入一个 <h1> 元素，您可以使用 before() 方法，如下所示：
p.before(h1)Code language: JavaScript (javascript)要将多个节点插入元素之前，您可以将这些节点作为参数传递给 before() 方法，如下所示：
Element.before(node1, node2, ... nodeN)Code language: JavaScript (javascript)此外，before() 方法接受一个或多个字符串，而不是节点。在这种情况下，before() 方法将字符串视为 Text 节点。
Element.before(str1, str2, ... strN)Code language: JavaScript (javascript)before() 方法返回 undefined。如果无法插入节点，则 before() 方法将抛出 HierarchyRequestError 异常。
JavaScript before() 示例
让我们来看一些使用 JavaScript before() 方法的示例。
1) 使用 JavaScript before() 在元素之前插入节点
以下示例使用 before() 方法在段落之前插入一个 <h1>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - before()</title>
</head>
<body>
<p>This is JavaScript DOM before() method demo.</p>
<script>
const p = document.querySelector('p');
// create a new h1 element
const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';
// insert the h1 before the paragraph
p.before(h1);
</script>
</body>
</html>Code language: HTML, XML (xml)工作原理。
首先，使用 querySelector() 方法获取 <p> 元素。
const p = document.querySelector('p');Code language: JavaScript (javascript)其次，创建一个新的标题元素并设置其 innerText。
const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';Code language: JavaScript (javascript)第三，在段落元素之前插入 <h1> 元素。
p.before(h1);Code language: JavaScript (javascript)2) 使用 JavaScript before() 在元素之前插入多个节点
以下示例使用 before() 方法在元素之前插入多个节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - before()</title>
</head>
<body>
<ul>
<li>Angular</li>
<li>Vue</li>
</ul>
<script>
const list = document.querySelector('ul');
const libs = ['React', 'Meteor', 'Polymer'];
const items = libs.map((lib) => {
const item = document.createElement('li');
item.innerText = lib;
return item;
});
list.firstChild.before(...items);
</script>
</body>
</html>Code language: HTML, XML (xml)工作原理
首先，使用 querySelector() 方法选择 ul 元素。
const list = document.querySelector('ul');Code language: JavaScript (javascript)其次，定义一个字符串数组。在实际应用中，您可以通过 API 调用获取它。
const libs = ['React', 'Meteor', 'Polymer'];Code language: JavaScript (javascript)第三，使用 map() 方法将字符串数组转换为 li 元素数组。
const items = libs.map((lib) => {
const item = document.createElement('li');
item.innerText = lib;
return item;
});Code language: JavaScript (javascript)最后，在 ul 元素的第一个子元素之前插入列表项元素。
list.firstChild.before(...items);Code language: JavaScript (javascript)请注意，...items 使用 扩展运算符 来扩展 items 数组的元素。
<ul> 元素将如下所示：
<ul>
<li>React</li>
<li>Meteor</li>
<li>Polymer</li>
<li>Angular</li>
<li>Vue</li>
</ul>Code language: HTML, XML (xml)前三个项目（React、Meteor 和 Polymer）插入到 Angular 项目之前，Angular 项目是 <ul> 元素的第一个子元素。
3) 使用 JavaScript before() 插入字符串
在 before() 方法中使用字符串时，before() 方法会将它们视为 Text 节点。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - before()</title>
<style>
button {
padding: 0.75em 1em;
background-color: #F7DF1E;
color: #000;
cursor: pointer;
border-radius: 50vw;
}
</style>
</head>
<body>
<button>Donate Here</button>
<script>
const button = document.querySelector('button');
button.firstChild.before('🧡 ');
</script>
</body>
</html>Code language: HTML, XML (xml)摘要
- 使用
element.before()方法在元素之前插入一个或多个节点。
