当前位置：首页 > JavaScript

js实现prependchild

2026-02-01 15:22:47JavaScript

使用 `parentNode.insertBefore` 方法

在 JavaScript 中，没有直接的 prependChild 方法，但可以通过 insertBefore 实现类似功能。将新节点插入到父节点的第一个子节点之前：

const parent = document.getElementById('parent');
const newChild = document.createElement('div');
newChild.textContent = 'New Child';

if (parent.firstChild) {
  parent.insertBefore(newChild, parent.firstChild);
} else {
  parent.appendChild(newChild);
}

使用 `Element.prepend` 方法（现代浏览器支持）

现代浏览器支持 Element.prepend 方法，可以直接在父元素的开头插入节点或字符串：

const parent = document.getElementById('parent');
const newChild = document.createElement('div');
newChild.textContent = 'New Child';

parent.prepend(newChild);

使用 `innerHTML` 或 `insertAdjacentHTML`

如果需要插入 HTML 字符串，可以结合 innerHTML 或 insertAdjacentHTML：

const parent = document.getElementById('parent');
const htmlString = '<div>New Child</div>';

// 方法1: 通过 innerHTML 插入
parent.innerHTML = htmlString + parent.innerHTML;

// 方法2: 使用 insertAdjacentHTML
parent.insertAdjacentHTML('afterbegin', htmlString);

使用 `DocumentFragment` 批量插入

如果需要插入多个节点，可以使用 DocumentFragment 提高性能：

js实现prependchild

const parent = document.getElementById('parent');
const fragment = document.createDocumentFragment();

const child1 = document.createElement('div');
child1.textContent = 'Child 1';
fragment.appendChild(child1);

const child2 = document.createElement('div');
child2.textContent = 'Child 2';
fragment.appendChild(child2);

parent.insertBefore(fragment, parent.firstChild);