js实现append
在JavaScript中实现append操作
在JavaScript中，append操作用于向DOM元素添加子节点或文本内容。有多种方法可以实现append功能，以下是几种常见的方式：
使用appendChild方法
const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = '新添加的内容';
parentElement.appendChild(newElement);appendChild方法将指定的节点添加到调用节点的子节点列表末尾。如果被添加的节点已经存在于文档中，它会被从原位置移动到新位置。
使用insertAdjacentHTML方法
const parentElement = document.getElementById('parent');
parentElement.insertAdjacentHTML('beforeend', '<div>新添加的内容</div>');insertAdjacentHTML方法可以指定插入位置：
- 'beforebegin'：元素自身的前面
- 'afterbegin'：插入元素内部的第一个子节点之前
- 'beforeend'：插入元素内部的最后一个子节点之后
- 'afterend'：元素自身的后面
使用innerHTML属性
const parentElement = document.getElementById('parent');
parentElement.innerHTML += '<div>新添加的内容</div>';这种方法会重写元素的所有HTML内容，效率较低且可能导致事件监听器丢失，不推荐频繁使用。
现代append方法
ES6引入了更简洁的append方法：
const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = '新添加的内容';
parentElement.append(newElement);append方法可以一次添加多个节点或字符串：
parentElement.append('文本内容', newElement, '更多文本');使用DocumentFragment
当需要添加大量节点时，使用DocumentFragment可以提高性能：
const parentElement = document.getElementById('parent');
const fragment = document.createDocumentFragment();
for(let i = 0; i < 100; i++) {
const newElement = document.createElement('div');
newElement.textContent = `项目 ${i}`;
fragment.appendChild(newElement);
}
parentElement.appendChild(fragment);jQuery中的append方法
如果使用jQuery库，append操作更加简洁：
$('#parent').append('<div>新添加的内容</div>');jQuery的append方法可以接受HTML字符串、DOM元素或jQuery对象作为参数。
性能考虑
对于大量DOM操作，建议：
- 使用DocumentFragment减少重绘和回流
- 避免频繁使用innerHTML
- 在离线DOM树中进行修改后再附加到文档中
- 考虑使用requestAnimationFrame进行批量更新
