js实现appendhtml
使用 innerHTML 追加 HTML 内容
通过 innerHTML 属性可以快速追加 HTML 内容到指定元素中。这种方法会替换或追加目标元素的 HTML 内容。
const element = document.getElementById('target');
element.innerHTML += '<div>追加的内容</div>';注意：innerHTML 会重新解析整个 HTML 内容，可能导致性能问题或事件监听器丢失。
使用 insertAdjacentHTML 方法
insertAdjacentHTML 方法允许在元素的指定位置插入 HTML 字符串，性能优于 innerHTML，且不会影响现有元素和事件。
const element = document.getElementById('target');
element.insertAdjacentHTML('beforeend', '<div>追加的内容</div>');参数说明：
'beforebegin'：在元素前插入'afterbegin'：在元素内部开头插入'beforeend'：在元素内部末尾插入'afterend'：在元素后插入
使用 DOM API 创建节点
通过 DOM API 创建节点并追加，适合需要精确控制节点属性的场景。
const parent = document.getElementById('target');
const newElement = document.createElement('div');
newElement.textContent = '追加的内容';
parent.appendChild(newElement);使用 DocumentFragment 优化批量追加
DocumentFragment 是一个轻量级的文档对象，适合批量插入多个节点，减少重绘次数。
const parent = document.getElementById('target');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 5; i++) {
const div = document.createElement('div');
div.textContent = `内容 ${i}`;
fragment.appendChild(div);
}
parent.appendChild(fragment);使用第三方库（如 jQuery）
如果项目中已引入 jQuery，可以使用其提供的便捷方法。
$('#target').append('<div>追加的内容</div>');注意事项
- 直接操作 HTML 字符串时需注意 XSS 攻击风险，避免拼接未转义的用户输入。
- 频繁操作 DOM 可能引发性能问题，建议使用
DocumentFragment或批量操作。
