JavaScript append 添加元素到父节点

在本教程中，您将学习如何使用 JavaScript append 方法在父节点的最后一个子节点之后插入一个 Node 对象或 DOMString 对象。

JavaScript append 方法简介

parentNode.append() 方法在父节点的最后一个子节点之后插入一组 Node 对象或 DOMString 对象：

parentNode.append(...nodes);
parentNode.append(...DOMStrings);

append()方法将插入 DOMString 对象作为 Text 节点。请注意，DOMString 是 UTF-16 字符串直接映射到字符串的。

append() 方法没有返回值。这意味着 append() 方法隐式返回 undefined。

append 方法追加元素示例

假设您有下面的 ul 元素：

<ul id="app">
    <li>JavaScript</li>
</ul>

以下示例演示如何创建 li 元素列表并将它们追加到 ul 元素：

let app = document.querySelector('#app');

let langs = ['TypeScript','HTML','CSS'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.append(...nodes);

输出 HTML：

<ul id="app">
    <li>JavaScript</li>
    <li>TypeScript</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>

• 首先，使用 querySelector 方法按其 id 选择 ul 元素。
• 其次，声明  langs 数组。
• 第三，对于每个 langs 数组元素，创建一个新 li 元素并将 langs 数组元素的值分配给 li 元素的 textContent 。
• 最后，使用 append 方法将 li 元素追加到 ul 元素。

append 方法将字符串追加到元素

假设您有下面的 HTML 片段：

<div id="app"></div>

您可以使用 append 方法将文本追加到元素：

let app = document.querySelector('#app');
app.append('append() Text Demo');

console.log(app.textContent);

输出 HTML：

<div id="app">append() Text Demo</div>

append 与 appendChild

以下是append 和 appendChild 之间的区别：

结论

使用 parentNode.append() 方法在 parentNode 的最后一个子节点之后追加一组Node对象或 DOMString 对象。