JavaScript appendChild 插入元素
您将学习如何使用 JavaScript appendChild 方法将元素追加到指定父节点的子节点末尾
3 min read
By
myfreax
在本教程中，您将学习如何使用 JavaScript appendChild 方法将元素追加到指定父节点的子节点末尾。
JavaScript appendChild 方法简介
appendChild 是 Node 的接口方法。appendChild 方法允许您将节点添加到指定父节点的子节点末尾。下面是 appendChild 方法的语法：
parentNode.appendChild(childNode);在此方法中， childNode 是要附加到指定父节点的节点。appendChild 方法将会返回追加的元素。
如果 childNode 是 HTML 文档中已存在的节点，则 appendChild() 方法将childNode 从当前位置移动到新位置。
JavaScript appendChild 示例
下面是是一些使用 appendChild 方法的例子。
简单的 appendChild 例子
假设您有以下 HTML 片段：
<ul id="menu"></ul>下面的示例使用 appendChild 方法向 <ul> 元素添加三个 li 元素 ：
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));代码是如何运行的：
- 首先，
createMenuItem()函数使用createElement方法创建一个指定名称的li元素。 - 其次，使用 querySelector 方法选择属性 id 的值是
menu的<ul>元素。 - 最后、调用
createMenuItem()函数创建新的li元素并使用appendChild方法将li元素追加到<ul>元素的子元素中。
输出：
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
</ul>把它们放在一起：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript appendChild() Demo</title>
</head>
<body>
<ul id="menu">
</ul>
<script>
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
</script>
</body>
</html>在文档示例中移动节点
假设您有两个列表分别是 first-list 和 second-list：
<ul id="first-list">
<li>Everest</li>
<li>Fuji</li>
<li>Kilimanjaro</li>
</ul>
<ul id="second-list">
<li>Karakoram Range</li>
<li>Denali</li>
<li>Mont Blanc</li>
</ul>下面的示例使用 appendChild 将第一个子元素从第一个列表移动到第二个列表：
const firstList = document.querySelector('#first-list');
const everest = firstList.firstElementChild;
const secondList = document.querySelector('#second-list');
secondList.appendChild(everest)代码是如何运行的：
- 首先，使用
querySelector方法通过属性 id 值是first-list选择第一个列表的ul元素。 - 其次，从第一个列表中选择第一个子元素。
- 第三，使用
querySelector方法通过属性 id 值是second-list选择第二个列表的ul元素。 - 最后，使用
appendChild方法将第一个列表中的第一个子元素追加到第二个列表。
结论
使用 appendChild 方法将节点添加到指定父节点的子节点末尾。appendChild 可用于将已存在节点移动到 HTML 文档中的新位置。
