js实现prepend
实现 prepend 方法
在 JavaScript 中,prepend 方法用于将一个或多个节点或字符串插入到父节点的第一个子节点之前。以下是几种实现方式:
使用原生 DOM API
现代浏览器原生支持 prepend 方法,可以直接调用:

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Prepended content';
parent.prepend(newElement);
也可以直接插入字符串:
parent.prepend('Prepended text');
兼容旧版浏览器的实现
对于不支持 prepend 的旧浏览器,可以使用 insertBefore 方法模拟:

function prepend(parent, newNode) {
parent.insertBefore(newNode, parent.firstChild);
}
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Prepended content';
prepend(parent, newElement);
插入多个节点
原生 prepend 支持插入多个节点:
const parent = document.getElementById('parent');
const div1 = document.createElement('div');
const div2 = document.createElement('div');
div1.textContent = 'First';
div2.textContent = 'Second';
parent.prepend(div1, div2);
jQuery 实现
如果使用 jQuery,可以直接使用 prepend 方法:
$('#parent').prepend('<div>Prepended content</div>');
注意事项
- 插入的节点如果是已存在的节点,会从原位置移动到新位置
- 字符串会被自动转换为文本节点
- 多次调用会导致节点顺序与调用顺序相反






