document.write和innerHTML有什么区别？
document.write 和 innerHTML 都是用于操作网页内容的 JavaScript 方法，但它们的工作方式和适用场景有很大的区别：
document.write():
-
写入时机:
document.write()会直接写入到文档流中。如果在页面加载完成后调用，它会先清空整个文档，然后再写入内容。 这通常会导致页面闪烁并重新加载所有资源，因此在页面加载完成后使用document.write()通常是不推荐的。 主要用于在页面加载过程中动态生成内容，或者用于向新打开的窗口写入内容。 -
写入方式: 将字符串形式的内容直接写入文档。它不会解析 HTML 标签，而是将它们作为纯文本输出。 除非字符串本身包含 HTML 标签。
-
适用场景:
- 动态生成页面内容（例如，根据用户输入或其他条件生成不同的内容）。 但现在通常用更现代的方法，例如操作 DOM。
- 向新打开的窗口写入内容。
- 一些简单的动态广告插入 (虽然现在也不推荐)。
innerHTML:
-
写入时机:
innerHTML可以随时修改元素的内容，而不会导致整个页面重新加载。它会替换指定元素的现有内容。 -
写入方式: 将字符串解析为 HTML 或 XML，并将其插入到指定的元素中。 这使得可以动态创建和修改 HTML 元素及其内容。
-
适用场景:
- 动态更新页面内容，例如根据用户交互或数据更新来改变部分页面内容。
- 创建新的 HTML 元素并将其插入到 DOM 中。
- 操作现有 HTML 元素的属性和样式。
总结：
| 特性 | document.write() | innerHTML |
|---|---|---|
| 写入时机 | 页面加载过程中或覆盖整个文档 | 随时，替换指定元素内容 |
| 写入方式 | 直接写入字符串，不解析 HTML (除非字符串包含HTML标签) | 解析 HTML 或 XML 并插入 |
| 性能 | 页面加载后使用会导致页面重载，性能较差 | 性能较好，不会导致页面重载 |
| 适用场景 | 页面加载中动态生成内容, 向新窗口写入内容 | 动态更新页面内容，创建/修改 HTML 元素 |
| 推荐程度 | 除非特殊情况，一般不推荐 | 推荐用于动态操作 HTML 内容 |
示例：
<!DOCTYPE html>
<html>
<head>
<title>document.write vs innerHTML</title>
</head>
<body>
<div id="myDiv">Original content</div>
<script>
// 使用 innerHTML 修改 div 内容
document.getElementById("myDiv").innerHTML = "<b>New content</b> using innerHTML";
// 如果在页面加载完成后使用 document.write，会清空页面并重新写入
// document.write("This will replace the entire page!");
</script>
</body>
</html>
总而言之，innerHTML 比 document.write() 更灵活、更安全、性能更好，并且更适合现代 Web 开发。 除非有非常特定的需求，否则应该避免使用 document.write()。
