JavaScript appendChild 插入元素

2024-06-30 20:38| 来源: 网络整理| 查看: 265

在本教程中，您将学习如何使用 JavaScript appendChild 方法将元素追加到指定父节点的子节点末尾。

JavaScript appendChild 方法简介

appendChild 是 Node 的接口方法。appendChild 方法允许您将节点添加到指定父节点的子节点末尾。下面是 appendChild 方法的语法：

parentNode.appendChild(childNode);

在此方法中， childNode 是要附加到指定父节点的节点。appendChild 方法将会返回追加的元素。

如果 childNode 是 HTML 文档中已存在的节点，则 appendChild() 方法将childNode 从当前位置移动到新位置。

JavaScript appendChild 示例

下面是是一些使用 appendChild 方法的例子。

简单的 appendChild 例子

假设您有以下 HTML 片段：

下面的示例使用 appendChild 方法向元素添加三个 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 的元素。最后、调用 createMenuItem() 函数创建新的 li 元素并使用 appendChild 方法将 li 元素追加到元素的子元素中。

输出：

Home Services About Us

把它们放在一起：

JavaScript appendChild() Demo 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')); 在文档示例中移动节点

假设您有两个列表分别是 first-list 和 second-list：

Everest Fuji Kilimanjaro Karakoram Range Denali Mont Blanc

下面的示例使用 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 文档中的新位置。

dom JavaScript 教程 javascript

【本文地址】

公司简介

联系我们