JavaScript element.prepend()
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 element.prepend() 方法。此方法对于 DOM 操作至关重要，它允许开发人员在父元素的子列表的开头插入节点。
基本定义
element.prepend() 方法在元素的第一个子节点之前插入一组 Node 对象或 DOMString 对象。它通过在所选元素的开头添加内容来修改 DOM。
与在末尾添加内容的 append() 不同，prepend() 在开头添加内容。它可以接受多个参数，并自动将字符串转换为 Text 节点。
基本的 prepend() 用法
此示例演示了如何将简单的文本节点预置到元素中。
<!DOCTYPE html>
<html>
<head>
<title>Basic prepend()</title>
</head>
<body>
<div id="container">
<p>Existing paragraph</p>
</div>
<script>
const container = document.getElementById('container');
container.prepend('Prepended text ');
</script>
</body>
</html>
在这个基本示例中，我们有一个带有现有段落的 div。JavaScript 代码在段落前预置了一个文本字符串。该字符串会自动转换为 Text 节点。
这演示了 prepend() 将内容添加到元素开头的基本用法。该方法在要插入内容的父元素上调用。
预置多个元素
此示例展示了如何一次使用 prepend() 预置多个元素。
<!DOCTYPE html>
<html>
<head>
<title>Prepending Multiple Elements</title>
</head>
<body>
<ul id="list">
<li>Original item</li>
</ul>
<script>
const list = document.getElementById('list');
const newItem1 = document.createElement('li');
newItem1.textContent = 'First new item';
const newItem2 = document.createElement('li');
newItem2.textContent = 'Second new item';
list.prepend(newItem1, newItem2);
</script>
</body>
</html>
这里我们有一个包含一个 li 项的 ul 元素。我们创建了两个新的 li 元素并将它们都一次性预置。元素按传递的顺序出现。
这演示了 prepend() 如何接受多个参数。该方法在父元素的任何现有子节点之前按顺序插入它们。
混合字符串和元素预置
此示例演示了在使用 prepend() 时混合字符串和元素。
<!DOCTYPE html>
<html>
<head>
<title>Mixed prepend</title>
</head>
<body>
<div id="content">
<p>Original content</p>
</div>
<script>
const content = document.getElementById('content');
const heading = document.createElement('h2');
heading.textContent = 'New Heading';
content.prepend('Text before heading ', heading, ' Text after heading');
</script>
</body>
</html>
在此示例中，我们预置了文本字符串和元素的组合。字符串被转换为 Text 节点，并与标题元素一起插入。
这展示了 prepend() 在处理不同类型内容方面的灵活性。该方法在 DOM 中保持参数的顺序。
响应事件进行预置
此示例展示了如何在事件处理程序中使用 prepend()。
<!DOCTYPE html>
<html>
<head>
<title>Event-driven prepend</title>
</head>
<body>
<div id="log"></div>
<button id="addBtn">Add Log Entry</button>
<script>
const log = document.getElementById('log');
const btn = document.getElementById('addBtn');
btn.addEventListener('click', () => {
const entry = document.createElement('div');
entry.textContent = `Log entry at ${new Date().toLocaleTimeString()}`;
log.prepend(entry);
});
</script>
</body>
</html>
这里我们有一个日志容器和一个按钮。每次点击按钮都会预置带有时间戳的新日志条目。这会创建按时间倒序排列的日志，最新的条目在前。
这演示了 prepend() 的一个实际用例，您希望保持时间倒序。该方法非常适合此类场景。
使用 DocumentFragment 进行预置
此示例演示了如何使用 DocumentFragment 和 prepend() 来提高性能。
<!DOCTYPE html>
<html>
<head>
<title>Prepend with DocumentFragment</title>
</head>
<body>
<div id="container">
<p>Original content</p>
</div>
<script>
const container = document.getElementById('container');
const fragment = document.createDocumentFragment();
const heading = document.createElement('h1');
heading.textContent = 'Main Title';
fragment.appendChild(heading);
const subheading = document.createElement('h2');
subheading.textContent = 'Subtitle';
fragment.appendChild(subheading);
container.prepend(fragment);
</script>
</body>
</html>
在此示例中，我们创建一个 DocumentFragment 来在一次性预置它们之前保存多个元素。这比多次 DOM 操作更有效。
DocumentFragment 是一个轻量级容器，在将内容添加到 DOM 之前不会触发重排。这使其成为批量操作的理想选择。
来源
在本文中，我们展示了如何在 JavaScript 中使用 element.prepend()。此方法对于 DOM 操作和在父元素开头插入元素非常强大。
作者
列出 所有 JS DOM 教程。