HTML DOM write() 方法 | HTML DOM Document 对象

返回到:DOM 对象:HTML DOM Document 对象

定义和用法

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。

语法

document.write(exp1,exp2,exp3,…)

参数描述
exp1,exp2,exp3,…可选。要写入的输出流。多个参数可以列出,他们将按出现的顺序被追加到文档中

浏览器支持:

所有主要浏览器都支持 write() 方法。

实例

向输出流写入一些文本:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>

<script>
document.write("Hello World!");
</script>

</body>
</html>

向输出流写入一些格式文本:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>

<script>
document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");
</script>

</body>
</html>

write() 与 writeln() 的区别:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
</head>
<body>

<p>注意write()方法不会在每个语句后面新增一行:</p>
<pre>
<script>
document.write("Hello World!");
document.write("Have a nice day!");
</script>
</pre>
<p>注意writeln()方法在每个语句后面新增一行:</p>
<pre>
<script>
document.writeln("Hello World!");
document.writeln("Have a nice day!");
</script>
</pre>

</body>
</html>

TIPS

Javascript 中只能在 HTML 输出流中使用 document.write,在文档已加载后使用它(比如在函数中),会覆盖整个文档。

HTML 输出流:当前数据形式是 HTML 格式的数据,这部分数据正被导出、传输或显示,所以称为”流“。

思考: 什么是在 html 输出中使用,什么是文档加载后使用?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

 <p>JavaScript 能够直接写入 HTML 输出流中:</p>
 <script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
 </script>

 <p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
    document.write("调用了函数,文档被重写");
}
</script>

</body>
 </html>

例子中代码执行到 document.write 就向页面写入,文档加载完成,但未调用函数,所以不会执行函数中的 document.write,当点击按钮,触发了事件,则是在文档加载完成后使用的 document.write,则会覆盖页面中原有信息。

用 javascript 编写的代码只能通过 html/xhtml 文档才能执行,代码一行一行解析,文档在加载的过程中实际是一边加载一边用 document.write 写出内容到屏幕上,而加载完成后,document 就关闭。如果再调用 document.write 往网页上写内容的话,就会重写 document。

作者:terry,如若转载,请注明出处:https://www.web176.com/javascriptbook/domtips/4691.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年12月15日 下午3:30
下一篇 2021年12月15日 下午3:37

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注