在本教程中,您将学习如何使用 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

以下是appendappendChild 之间的区别:

差异 append appendChild
返回值 undefined 追加的Node对象
输入 多个 Node 对象 单个 Node 对象
参数类型 接受 Node 对象 和 DOMString 已存在的Node

结论

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