html覆盖文档问题

最新推荐文章于 2021-06-09 12:14:34 发布

余音流川

最新推荐文章于 2021-06-09 12:14:34 发布

阅读量396

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41273101/article/details/100048687

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

您只能在 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>

余音流川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html覆盖文档问题

您只能在 HTML 输出流中使用 document.write。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。首先什么是html输出流？HTML 输出流指的是当前数据形式是HTML格式的数据，这部分数据正被导出、传输或显示，所以称为”流“。当document.write()直接被被执行，那么不会出现覆盖，而通过函数事件触发，由于事先没有被加载如文档，之后会出现覆盖原输出结果。...
复制链接

扫一扫