document.write()是JavaScript中用于向HTML文档写入内容的方法。它将指定的字符串直接写入到当前文档流中，通常用于页面加载过程中动态生成内容。
语法
document.write(markup);markup：包含要写入文档的文本的字符串
使用方法与代码
1. 基本文本输出
document.write("Hello, World!");这将在当前页面输出"Hello, World!"。
2. 输出HTML标签
document.write("<h1>Welcome to my website</h1>");这将在页面中生成一个标题元素，显示为"Welcome to my website"。
3. 带样式的HTML输出
document.write("<h1 style='color: green;'>欢迎来到这里学习JavaScript!</h1>");这将在页面中显示绿色的标题文字"欢迎来到这里学习JavaScript!"。
4. 变量拼接输出
var name = "John";
document.write("My name is " + name);这将输出" My name is John"。
5. 动态生成HTML内容
var someCondition = true;
if (someCondition) {
document.write("<p>Condition is true.</p>");
} else {
document.write("<p>Condition is false.</p>");
}这将根据条件动态生成相应的段落内容。
6. 完整HTML文档示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>document.write示例</title>
</head>
<body>
<script>
document.write("<h1 style='color: blue;'>这是通过document.write生成的内容</h1>");
document.write("<p>欢迎学习JavaScript！</p>");
</script>
</body>
</html>重要注意事项
- 强烈不建议使用：根据MDN文档，
document.write()方法具有非常特殊的行为，可能导致难以调试的故障。 - 覆盖页面内容：如果
document.write()在页面加载完成后被调用，它将覆盖整个页面内容。 - 自动调用document.open()：在已关闭（已加载）的文档上调用
document.write()会自动调用document.open()，这将清空文档。 - XHTML不兼容：在XHTML文档中无法正常工作，会收到"Operation is not supported"错误。
- 异步脚本中被忽略：在延迟或异步脚本中使用
document.write()将被忽略。 - 浏览器兼容性：从Chrome 55版本开始，浏览器可能不会执行通过
<script>元素中的document.write()。
为什么在现代开发中不推荐使用
- 破坏性：它会清空整个文档，可能导致页面内容丢失
- 难以调试：行为受网络延迟影响，可能导致难以复现的问题
- 阻塞加载：在文档加载过程中会阻塞页面的加载
- 替代方案：现代Web开发推荐使用更安全、更灵活的DOM操作方法，如
createElement(),appendChild(),innerHTML等
推荐替代方案
// 使用DOM操作替代document.write()
var h1 = document.createElement("h1");
h1.textContent = "这是通过DOM操作生成的内容";
h1.style.color = "blue";
document.body.appendChild(h1);
