JavaScript append() 方法

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

JavaScript append() 方法简介

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

parentNode.append(...nodes);
parentNode.append(...DOMStrings);Code language: JavaScript (javascript)

append() 方法将插入 DOMString 对象作为 Text 节点。

请注意，DOMString 是一个 UTF-16 字符串，它直接映射到一个字符串。

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

JavaScript append() 方法示例

让我们来看一些使用 append() 方法的示例。

1) 使用 append() 方法添加元素示例

假设您有以下 ul 元素

<ul id="app">
    <li>JavaScript</li>
</ul>Code language: HTML, XML (xml)

以下示例显示了如何创建 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);Code language: JavaScript (javascript)

输出 HTML

<ul id="app">
    <li>JavaScript</li>
    <li>TypeScript</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>Code language: HTML, XML (xml)

工作原理

• 首先，使用 querySelector() 方法通过其 id 选择 ul 元素。
• 其次，声明一个语言数组。
• 第三，对于每种语言，创建一个新的 li 元素，其 textContent 赋值为该语言。
• 最后，使用 append() 方法将 li 元素添加到 ul 元素中。

2) 使用 append() 方法将文本添加到元素示例

假设您有以下 HTML

<div id="app"></div>Code language: HTML, XML (xml)

您可以使用 append() 方法将文本添加到元素中

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

console.log(app.textContent);Code language: JavaScript (javascript)

输出 HTML

<div id="app">append() Text Demo</div>Code language: HTML, XML (xml)

append 与 appendChild()

下表显示了 append() 和 appendChild() 方法之间的区别

总结

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

测验