参考资料

  1. HTML DOM 鼠标的坐标？
  2. HTML DOM 返回图像映射的某个区域的hostname实例
  3. HTML DOM 被按下的键盘键的keycode？
  4. HTML DOM 返回表单中的enctype属性的值
  5. HTML DOM 改变一个iframe的src
  6. HTML DOM 节点列表
  7. HTML DOM 哪个鼠标键被点击了？
  8. HTML DOM 获取第一个链接ID的实例

HTML DOM document.write() 方法

HTML DOM document.write() 方法

  1. 基本介绍

  • document.write() 是 JavaScript 中用于向 HTML 文档输出内容的方法

  • 可以直接写入 HTML 标签和文本内容

  • 通常在页面加载过程中使用

  1. 语法
    document.write(content);

  2. 参数说明

  • content: 要写入文档的 HTML 内容（字符串）

  1. 基本用法示例

<script>
document.write("<h1>Hello World</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

  1. 动态内容示例

<script>
var name = "John";
document.write("<p>Welcome, " + name + "!</p>");
</script>

  1. 结合CSS样式

<script>
document.write("<p style='color:blue;font-size:20px;'>Styled text</p>");
</script>

  1. 使用CSS类

<style>
.highlight {
  background-color: yellow;
  padding: 5px;
}
</style>

<script>
document.write("<span class='highlight'>Highlighted text</span>");
</script>

  1. 注意事项

  • 如果在文档加载完成后调用，会覆盖整个文档

  • 不推荐在现代网页开发中频繁使用

  • 更适合用于简单的测试和演示

  1. 替代方法
    现代开发推荐使用：

  • innerHTML

  • textContent

  • DOM 操作方法（createElement, appendChild等）

  1. 完整示例

<!DOCTYPE html>
<html>
<head>
<style>
  .output {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
  }
</style>
</head>
<body>

<script>
document.write("<div class='output'>");
document.write("<h2>Document.write() Demo</h2>");
document.write("<p>Current date: " + new Date() + "</p>");
document.write("</div>");
</script>

</body>
</html>
TAG：文档内容方法示例基本现代直接标签文本页面