JavaScript before 指定元素之前插入元素与标签
您将学习如何使用 JavaScript before 方法在元素之前插入节点元素或者标签
在本教程中，您将学习如何使用 JavaScript before 方法在元素之前插入节点元素或者标签。
JavaScript before 方法简介
element.before() 方法允许您在指定的元素 Element 之前插入一个或多个标签节点。before() 方法的语法如下所示：
Element.before(node)
在此语法中，before() 方法将节点插入到 DOM 树中的 Element 之前。
例如，假设你有一个 <p> 元素并且你想在它之前插入一个 <h1> 元素，你可以这样 使用 before 方法：
p.before(h1)要在元素之前插入多个节点，请将节点传递给 before() 方法，如下所示：
Element.before(node1, node2,... nodeN)此外，before() 方法接受一个或多个字符串而不是节点。在这种情况下，before() 方法将字符串视为 Text 节点：
Element.before(str1, str2, ... strN)before() 方法返回 undefined。如果无法插入节点，则 before 方法会抛出 HierarchyRequestError 异常。
JavaScript before 在元素之前插入节点
下面的示例使用 before 在 <p> 元素之前插入 <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>代码是如何运行的。
首先，使用 querySelector 方法获取 <p> 元素：
const p = document.querySelector('p');
其次，创建一个新的标题元素 <h1> 并设置 h1元素的 innerText 属性：
const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';第三，在 <p> 元素之前插入 <h1> 元素：
p.before(h1);
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>代码是如何运行的：
首先，使用以下 document 的方法 querySelector 方法选择 ul 元素：
const list = document.querySelector('ul');
其次，定义一个字符串数组。
const libs = ['React', 'Meteor', 'Polymer'];
第三，使用以下数组的 map 方法将字符串数组转换为 li 元素数组：
const items = libs.map((lib) => {
const item = document.createElement('li');
item.innerText = lib;
return item;
});最后，在 ul 元素的第一个子元素之前插入元素：
list.firstChild.before(...items);
请注意，...items 使用展开运算符来展开 items 数组的元素。
最终的 <ul> 元素将如下所示：
<ul>
<li>React</li>
<li>Meteor</li>
<li>Polymer</li>
<li>Angular</li>
<li>Vue</li>
</ul>前三个子项（React、Meteor 和 Polymer）被插入到 Angular 子项之前，Angular 子项是 <ul> 元素的第一个子元素。
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>结论
使用 element.before() 方法在元素之前插入一个或多个节点。
