当前位置：首页 > JavaScript

js实现prepend

2026-03-15 00:23:32JavaScript

实现 prepend 的方法

在 JavaScript 中，prepend 方法用于在父元素的第一个子节点之前插入新节点或字符串。以下是几种实现方式：

使用原生 DOM API

现代浏览器原生支持 Element.prepend() 方法：

js实现prepend

const parent = document.getElementById('parent');
const child = document.createElement('div');
child.textContent = 'New child';
parent.prepend(child);

也可以直接插入字符串：

parent.prepend('Prepended text');

兼容旧浏览器的实现

对于不支持 prepend 的旧浏览器，可以使用 insertBefore：

js实现prepend

function prepend(parent, child) {
  parent.insertBefore(child, parent.firstChild);
}

const parent = document.getElementById('parent');
const child = document.createElement('div');
child.textContent = 'Old browser support';
prepend(parent, child);

使用 jQuery

如果项目中使用 jQuery，可以直接使用其 prepend 方法：

$('#parent').prepend('<div>New child</div>');

性能注意事项

当需要插入多个元素时，可以先创建文档片段：

const fragment = document.createDocumentFragment();
const div1 = document.createElement('div');
div1.textContent = 'First';
const div2 = document.createElement('div');
div2.textContent = 'Second';
fragment.appendChild(div1);
fragment.appendChild(div2);

document.getElementById('parent').prepend(fragment);

这样可以减少页面重排次数，提高性能。