document.write, innerHTML

关注

原创最新推荐文章于 2026-09-07 16:03:03 发布 4.3k 阅读 AI 写同款· GEO 优化 ›

深入解析 document.write、innerHTML 和 innerText 的区别场景推荐方法理由完全避免过时、危险、行为不可预测。插入用户提供的不可信内容innerText或安全，能有效防止 XSS 攻击。仅更新元素的可见文本innerText或高效且安全。动态创建复杂的 HTML 结构innerHTML谨慎使用强大，但必须确保内容字符串是安全可信的（例如，来自开发者自己定义的模板，而非用户输入）。最佳性能实践（创建结构）和虽然代码量多，但性能最优、最安全、最可控的方式。结合文档片段 (DocumentFragment)用于批量插入。阅读详情

document.write直接输出在浏览器，后面继续write ，内容会一直在后面添加。

innerHTML就是获取或设置指定DOM元素(id)的内容，就是<div id="dddd"></div>之间的东西。与id挂钩。

innerHTML可以方便有快捷的插入大段的HTML内容，但是不能对innerHTML插入的内容进行处理。还有一点要说的是innerHTML不是W3C DOM标准的组成部分，而是一项专利技术。

在document中write脚本是作为文本直接处理，CSS风格奏效

<script type="text/javascript">
document.write("<script>alert('aaa')</script>"); //脚本报错
document.write("<script>alert('aaa')</script>"); //直接显示的是<script>alert('aaa')</script> ,不能生成<script>到新的窗口
document.write("<style>a{color:red;font-weight:bold;}</style>");
</script>

innerHTML 中CSS没有生效，同样，javascript没有生效

：：CSS的写入必须使用write方式

document.write只推荐在页面onload之前使用

如果加载时就要用脚本输出,用document.write好一点! 速度会更快!
如果网页已经加载完毕,用innerHTML会更安全一点,用document.write会出错

收录于