js 实现jquery append
使用原生 JavaScript 实现类似 jQuery 的 append 功能
在原生 JavaScript 中，可以通过 appendChild 或 insertAdjacentHTML 方法实现类似 jQuery 的 append 功能。以下是几种实现方式：
使用 appendChild 方法
appendChild 方法将节点添加到指定父节点的子节点列表末尾。
// 获取父元素
const parentElement = document.getElementById('parent');
// 创建要添加的子元素
const childElement = document.createElement('div');
childElement.textContent = '这是新添加的内容';
// 将子元素添加到父元素中
parentElement.appendChild(childElement);使用 insertAdjacentHTML 方法
insertAdjacentHTML 方法可以更灵活地插入 HTML 字符串。
// 获取父元素
const parentElement = document.getElementById('parent');
// 插入 HTML 字符串到父元素内部末尾
parentElement.insertAdjacentHTML('beforeend', '<div>这是新添加的内容</div>');实现类似 jQuery 的链式调用
如果需要链式调用，可以封装一个简单的函数：
function $(selector) {
const element = document.querySelector(selector);
return {
append: function(html) {
element.insertAdjacentHTML('beforeend', html);
return this; // 返回对象本身以实现链式调用
}
};
}
// 使用示例
$('#parent').append('<div>内容1</div>').append('<div>内容2</div>');动态添加多个元素
如果需要添加多个元素，可以遍历数组并依次添加：
const items = ['Item 1', 'Item 2', 'Item 3'];
const parentElement = document.getElementById('parent');
items.forEach(item => {
const div = document.createElement('div');
div.textContent = item;
parentElement.appendChild(div);
});注意事项
appendChild只能添加 DOM 节点，不能直接添加 HTML 字符串。insertAdjacentHTML可以直接插入 HTML 字符串，但需要注意避免 XSS 攻击。- 原生方法没有 jQuery 的错误处理机制，需确保父元素存在。
以上方法可以根据需求选择使用，实现类似 jQuery append 的功能。
