js实现追加
使用 innerHTML 追加内容
通过修改元素的 innerHTML 属性可以直接追加 HTML 内容。
const element = document.getElementById('target');
element.innerHTML += '<p>追加的内容</p>';注意：此方法会重新解析整个 HTML 结构，可能影响性能或事件绑定。
使用 insertAdjacentHTML 追加内容
insertAdjacentHTML 允许在指定位置插入 HTML，性能优于 innerHTML。
const element = document.getElementById('target');
element.insertAdjacentHTML('beforeend', '<p>追加的内容</p>');可选位置参数：
beforebegin：元素前插入afterbegin：元素内部开头插入beforeend：元素内部末尾插入（常用）afterend：元素后插入
使用 appendChild 追加 DOM 节点
适用于动态创建节点并追加到 DOM 中。
const parent = document.getElementById('target');
const newElement = document.createElement('p');
newElement.textContent = '追加的内容';
parent.appendChild(newElement);使用 append 方法（现代浏览器）
append 支持同时追加多个节点或字符串。
const parent = document.getElementById('target');
parent.append('文本内容', document.createElement('span'));使用 DocumentFragment 优化批量追加
通过文档片段减少 DOM 操作次数，提升性能。
const parent = document.getElementById('target');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const p = document.createElement('p');
p.textContent = `段落 ${i}`;
fragment.appendChild(p);
}
parent.appendChild(fragment);注意事项
- 直接操作 HTML（如
innerHTML）可能引发 XSS 风险，需对内容转义。 - 频繁 DOM 操作建议使用
DocumentFragment或批量处理。 - 现代框架（如 React/Vue）通常提供更高效的数据驱动更新机制。
