参考资料

  1. HTML DOM 改变image的src
  2. HTML DOM 改变一个包含在iframe中的文档的背景颜色
  3. HTML DOM 返回图像映射的某个区域的href 实例
  4. HTML DOM 返回一个链接的type属性的值实例
  5. HTML DOM 访问
  6. HTML DOM 返回和设置链接的href属性实例
  7. HTML DOM对单个单元格的内容垂直对齐
  8. HTML DOM 节点列表长度

HTML DOM write() 和 writeln()的不同实例

HTML DOM write() 和 writeln() 方法

基本介绍

document.write()document.writeln() 都是 JavaScript 中用于向 HTML 文档写入内容的方法。

主要区别

方法描述是否添加换行符
write()向文档写入内容
writeln()向文档写入内容并在末尾添加换行符(\n)

标签和用法

这两个方法都属于 document 对象的方法,语法如下:

document.write(content);
document.writeln(content);

功能

  • 动态生成 HTML 内容

  • 在页面加载过程中插入内容

  • 可以包含 HTML 标签

实例

基本使用

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

带 CSS 扩展的实例

<script>
document.write('<div style="color: blue; font-size: 20px;">Styled content</div>');
document.writeln('<p style="background-color: #f0f0f0; padding: 10px;">Styled paragraph</p>');
</script>

使用外部样式

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>

<script>
document.writeln('<span class="highlight">Highlighted text</span>');
document.write('<div class="highlight">Another highlighted element</div>');
</script>

注意事项

  1. 如果在页面加载完成后调用这些方法,会覆盖整个文档

  2. writeln() 的换行符只在 <pre> 标签中可见

  3. 现代开发中推荐使用 DOM 操作方法(如 createElementappendChild)替代这些方法