JavaScript prepend() 方法

摘要：在本教程中，您将学习 JavaScript prepend() 方法，该方法在父节点的第一个子节点之前插入 Node 对象或 DOMString 对象。

JavaScript prepend() 方法介绍

prepend() 方法在父节点的第一个子节点之前插入一组 Node 对象或 DOMString 对象

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

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

prepend() 方法返回 undefined。

JavaScript prepend() 方法示例

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

1) 使用 prepend() 方法在元素开头添加元素示例

假设您有以下 <ul> 元素

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

此示例展示了如何创建一个 li 元素列表并将它们添加到 ul 元素的开头

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

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

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

app.prepend(...nodes);Code language: JavaScript (javascript)

输出 HTML

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

工作原理

• 首先，使用 querySelector() 方法通过其 id 选择 ul 元素。
• 其次，声明一个字符串数组。
• 第三，对于数组中的每个元素，创建一个新的 li 元素，并将 textContent 分配给数组元素。
• 最后，使用 prepend() 方法将 li 元素添加到 ul 父元素的开头。

2) 使用 prepend() 方法在元素开头添加文本示例

假设您有以下元素

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

以下展示了如何使用 prepend() 方法在上面的 <div> 元素开头添加文本

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

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

输出 HTML

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

总结

• 使用 parentNode.prepend() 方法在父节点的第一个子节点之前添加 Node 对象或 DOMString 对象列表。

测验