document.write 和 innerHTML、innerText 的区别

document.write 与 innerHTML、innerText 的区别

document.write
直接写入 HTML 文档流，若在页面加载完成后调用会覆盖整个文档。常用于动态生成内容，但会破坏现有 DOM 结构，不推荐在现代开发中使用。

document.write("<p>直接写入文档</p>");

innerHTML
操作 DOM 元素的 HTML 内容，可解析标签并渲染。允许修改元素的子节点和 HTML 结构，但存在 XSS 安全风险。适用于需要动态插入复杂 HTML 的场景。

element.innerHTML = "<strong>加粗文本</strong>";

innerText
仅修改元素的纯文本内容，自动忽略 HTML 标签并转义特殊字符。性能优于 innerHTML 且更安全，但无法处理 HTML 结构。适合仅需更新文本的场景。

element.innerText = "<script>alert('XSS')</script>";

关键差异总结

• 解析方式：innerHTML 渲染 HTML 标签，innerText 输出纯文本，document.write 直接写入文档流。
• 安全性：innerText 自动过滤脚本，innerHTML 需手动防 XSS，document.write 可能破坏页面。
• 使用时机：document.write 仅适合页面加载阶段，后两者可随时操作 DOM。

// 安全示例：使用 textContent（类似 innerText 但保留换行）  
element.textContent = "安全文本内容";