js 实现 prepend

实现 prepend 方法

在 JavaScript 中，prepend 方法用于将一个或多个节点插入到父节点的子节点列表的最前面。以下是几种实现方式：

使用 DOM 的 prepend 方法

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

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

使用 insertBefore 方法

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

const parent = document.getElementById('parent');
const child = document.createElement('div');
parent.insertBefore(child, parent.firstChild);

使用字符串或 HTML

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

const parent = document.getElementById('parent');
parent.insertAdjacentHTML('afterbegin', '<div>New 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');
prepend(parent, 'Text node', document.createElement('div'));

注意事项

• 插入的节点可以是元素、文本节点或 HTML 字符串。
• 如果插入的节点已存在于文档中，它会被移动到新位置。
• 多个节点会按顺序插入，最后一个参数会成为第一个子节点。