当前位置：首页 > JavaScript

js 实现jquery append

2026-02-02 22:35:41JavaScript

使用原生 JavaScript 实现 jQuery 的 `append` 功能

在原生 JavaScript 中，可以通过 appendChild 或 insertAdjacentHTML 方法实现类似 jQuery append 的功能。以下是几种常见实现方式：

方法一：使用 appendChild

// 获取父元素
const parentElement = document.getElementById('parent');

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '新添加的内容';

// 添加到父元素末尾
parentElement.appendChild(newElement);

方法二：使用 insertAdjacentHTML

// 获取父元素
const parentElement = document.getElementById('parent');

// 在父元素内部末尾插入HTML
parentElement.insertAdjacentHTML('beforeend', '<div>新添加的内容</div>');

方法三：封装成函数

function append(selector, content) {
    const parent = document.querySelector(selector);
    if (typeof content === 'string') {
        parent.insertAdjacentHTML('beforeend', content);
    } else {
        parent.appendChild(content);
    }
}

// 使用示例
append('#parent', '<span>追加的内容</span>');

方法四：支持多个元素追加

function append(selector, content) {
    const parents = document.querySelectorAll(selector);
    parents.forEach(parent => {
        if (typeof content === 'string') {
            parent.insertAdjacentHTML('beforeend', content);
        } else if (content.nodeType) {
            parent.appendChild(content.cloneNode(true));
        }
    });
}

// 使用示例
append('.container', '<p>段落内容</p>');

注意事项

appendChild 方法会移动DOM中已存在的节点
insertAdjacentHTML 只能插入字符串格式的HTML
要插入多个元素时，需要先创建文档片段或循环添加
现代浏览器支持原生的 Element.append() 方法，可以同时添加多个节点和字符串

浏览器兼容性解决方案

对于需要支持旧版浏览器的情况：

function append(selector, content) {
    const parents = document.querySelectorAll(selector);
    parents.forEach(parent => {
        if (typeof content === 'string') {
            const temp = document.createElement('div');
            temp.innerHTML = content;
            while(temp.firstChild) {
                parent.appendChild(temp.firstChild);
            }
        } else {
            parent.appendChild(content.cloneNode(true));
        }
    });
}

这些方法提供了从简单到全面的原生JavaScript实现方案，可以替代jQuery的append功能。

js 实现jquery append