当前位置：首页 > JavaScript

js 实现 prepend

2026-03-13 23:54:53JavaScript

实现 prepend 方法

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

使用原生 DOM API

现代浏览器原生支持 prepend 方法，可以直接调用：

js 实现 prepend

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Prepended content';
parent.prepend(newElement);

兼容旧版浏览器的实现

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

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Prepended content';
parent.insertBefore(newElement, parent.firstChild);

插入多个元素或字符串

prepend 支持插入多个参数，包括字符串和元素：

js 实现 prepend

const parent = document.getElementById('parent');
const newElement1 = document.createElement('div');
newElement1.textContent = 'First element';
const newElement2 = document.createElement('span');
newElement2.textContent = 'Second element';
parent.prepend(newElement1, newElement2, 'Text content');

使用 jQuery

如果项目中已引入 jQuery，可以使用其提供的 prepend 方法：

$('#parent').prepend('<div>Prepended content</div>');

自定义 prepend 函数

可以封装一个通用的 prepend 函数，兼容各种场景：

function prepend(parent, ...nodes) {
  nodes.forEach(node => {
    if (typeof node === 'string') {
      parent.insertAdjacentHTML('afterbegin', node);
    } else {
      parent.insertBefore(node, parent.firstChild);
    }
  });
}

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Prepended content';
prepend(parent, newElement, 'Text content');