Element.innerHTML = html；输出html，但稍有更改

Element.innerHTML 是 JavaScript 中的一个属性，它用于获取或设置指定元素的 HTML 内容。当你对一个元素的 innerHTML 属性进行赋值时，浏览器会解析这个 HTML 字符串，并根据其中的标签和内容重新构建该元素的内部结构。

基础概念

• HTML 解析：浏览器将 HTML 字符串解析成 DOM（文档对象模型）节点的过程。
• DOM 操作：通过 JavaScript 对 HTML 文档进行动态修改。

优势

• 灵活性：可以直接插入复杂的 HTML 结构。
• 性能：对于大量数据的插入，使用 innerHTML 通常比逐个添加元素更快。

类型

• 获取：let content = element.innerHTML;
• 设置：element.innerHTML = newContent;

应用场景

• 动态生成表格或列表。
• 插入富文本内容。
• 实现简单的模板引擎。

可能遇到的问题及解决方法

1. 输出的 HTML 与预期不符

原因：可能是由于 HTML 字符串中的特殊字符或格式错误导致的。

解决方法：

• 确保 HTML 字符串格式正确。
• 使用 encodeURIComponent 或 encodeURI 对特殊字符进行编码。

let html = '<div>Hello & World!</div>';
element.innerHTML = html;

2. 性能问题

原因：频繁修改 innerHTML 会导致浏览器频繁重绘和回流，从而影响性能。

解决方法：

• 尽量减少对 innerHTML 的修改次数。
• 使用文档片段（DocumentFragment）来优化性能。

let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    let div = document.createElement('div');
    div.textContent = 'Item ' + i;
    fragment.appendChild(div);
}
element.appendChild(fragment);

3. 安全问题

原因：直接使用用户输入的 HTML 字符串可能导致 XSS（跨站脚本攻击）。

解决方法：

• 对用户输入进行严格的验证和过滤。
• 使用 textContent 而不是 innerHTML 来插入纯文本内容。

let userInput = '<script>alert("XSS")</script>';
// 不安全的做法
element.innerHTML = userInput;

// 安全的做法
element.textContent = userInput;

参考链接

• MDN Web Docs: Element.innerHTML
• MDN Web Docs: DocumentFragment

请注意，在实际开发中，应根据具体需求和场景选择合适的方法来操作 DOM。