js实现appendhtml
使用 innerHTML 追加 HTML
通过直接修改元素的 innerHTML 属性来追加 HTML 内容。这种方法简单直接，但会替换元素内原有的所有内容，因此需要结合原有内容使用。
const element = document.getElementById('target');
element.innerHTML += '<div>追加的内容</div>';使用 insertAdjacentHTML 方法
insertAdjacentHTML 方法可以在指定位置插入 HTML 字符串，而不会影响元素的其他子节点。支持四种插入位置：
beforebegin：元素之前afterbegin：元素内部的开头beforeend：元素内部的末尾afterend：元素之后
const element = document.getElementById('target');
element.insertAdjacentHTML('beforeend', '<div>追加的内容</div>');使用 createElement 和 appendChild
通过创建新的 DOM 节点并追加到目标元素中。这种方法更符合 DOM 操作规范，适合动态生成复杂内容。
const element = document.getElementById('target');
const newDiv = document.createElement('div');
newDiv.textContent = '追加的内容';
element.appendChild(newDiv);使用 DocumentFragment 优化批量追加
如果需要追加大量 HTML 节点，使用 DocumentFragment 可以减少页面重绘次数，提高性能。
const element = document.getElementById('target');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const newDiv = document.createElement('div');
newDiv.textContent = `内容 ${i}`;
fragment.appendChild(newDiv);
}
element.appendChild(fragment);使用第三方库（如 jQuery）
如果项目中已引入 jQuery，可以使用其提供的 append 方法简化操作。
$('#target').append('<div>追加的内容</div>');注意事项
- 使用
innerHTML时需注意 XSS 攻击风险，避免直接插入未经验证的用户输入。 insertAdjacentHTML是性能较好的选择，支持灵活的位置插入。- 复杂场景推荐使用
createElement或DocumentFragment，确保代码可维护性。
