您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
首先什么是html输出流?
HTML 输出流指的是当前数据形式是HTML格式的数据,这部分数据正被导出、传输或显示,所以称为”流“。
当document.write()直接被被执行,那么不会出现覆盖,而通过函数事件触发,由于事先没有被加载如文档,之后会出现覆盖原输出结果。
案例
<html>
<head>
<meta charset="utf-8">
<title>输出流覆盖</title>
</head>
<body bgcolor='pink'>
<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
<input type="button" value="切换" onclick="hello()">
</body>
<script>
function hello(){
document.write("这是一个标题");
document.write("<p>这是一个段落。</p>");
}
</script>
</html>
像下面情况就不会出现覆盖`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body bgcolor='pink'>
<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
</body>
<script>
function hello(){
document.write("这是一个标题");
document.write("<p>这是一个段落。</p>");
}
hello();
</script>
</html>