参考资料

  1. HTML DOM 重置表单
  2. HTML DOM 返回文档的完整的URL实例
  3. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
  4. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  5. HTML DOM 创建一个链接指向一个低分辨率的image
  6. HTML DOM为表格创建一个标题
  7. HTML DOM 返回图像映射的某个区域的pathname 实例
  8. HTML DOM单元格内容水平对齐

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：文档内容方法示例基本现代直接标签文本页面

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。