JavaScript after 指定元素插入一个或多个元素
您将学习如何使用 JavaScript after 方法在指定元素后面插入节点元素
在本教程中，您将学习如何使用 JavaScript after 方法在指定元素后面插入节点元素。
JavaScript after 方法简介
after() 是 Element 类型的方法。element.after()方法允许您在 Element 之后插入一个或者多个节点元素。
after 方法语法如下所示：
Element.after(node)在此语法中，after() 方法将节点 node 插入到 DOM 树的 Element 元素之后。
例如，假设你有一个 <h1> 元素并且你想在它后面插入一个 <p> 元素，你可以使用这样 after 方法：
h1.after(p)要在元素后插入多个节点，请将多个节点 node 传递给 after() 方法，如下所示：
Element.after(node1, node2, ... nodeN)after() 方法还接受一个或多个字符串。在这种情况下，after() 方法将字符串视为 Text 节点：
Element.after(str1, str2, ... strN)after() 方法返回 undefined，如果无法插入节点，则会抛出异常 HierarchyRequestError。
JavaScript after 在元素后面插入节点元素
以下示例使用 after() 方法在 <h1> 元素后插入段落 <p> 元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - after()</title>
</head>
<body>
<h1>JavaScript DOM - after()</h1>
<script>
const h1 = document.querySelector('h1');
// create a new paragraph element
const p = document.createElement('p');
p.innerText = 'This is JavaScript DOM after() method demo';
// insert the paragraph after the heading
h1.after(p);
</script>
</body>
</html>代码是如何运行的。
首先，使用 querySelector() 方法获取标题元素 <h1>：
const h1 = document.querySelector('h1');
其次，创建一个新的段落元素并设置其 innerText 属性的值：
const p = document.createElement('p');
p.innerText = 'This is JavaScript DOM after() method demo';第三、在 <h1> 元素后面插入 <p> 元素：
h1.after(p);JavaScript after 在元素后插入多个节点元素标签
以下示例使用 after() 方法在元素后插入多个节点元素或者标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM - after()</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.lastChild.after(...items);
</script>
</body>
</html>代码是如何运行的：
首先，使用 querySelector() 方法选择 ul 元素：
const list = document.querySelector('ul');
其次，定义一个字符串数组。在实践中，您可以通过 API 调用获取它。
const libs = ['React', 'Meteor', 'Polymer'];第三，使用数组的 map() 方法将字符串数组转换为 li 元素：
const items = libs.map((lib) => {
const item = document.createElement('li');
item.innerText = lib;
return item;
});最后，在 ul 元素的最后一个子元素之后插入 li 元素的列表：
list.lastChild.after(...items);
请注意，...items 使用展开运算符来展开 items 数组的元素。
<ul>
<li>Angular</li>
<li>Vue</li>
<li>React</li>
<li>Meteor</li>
<li>Polymer</li>
</ul> Vue 是 <ul> 元素的最后一个子元素，最后三个 li 元素（React、Meteor 和 Polymer）插入到 Vue 后面。
JavaScript after 插入字符串
当您在 after() 方法使用字符串时，它会将传递给 after() 的参数视为 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 - after()</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.after(' 🧡');
</script>
</body>
</html>结论
使用 element.after() 方法在元素后面插入一个或多个元素节点。
