JS 中 document.write() 的用法和隐藏的坑

千锋教育官方

已于 2023-05-19 13:31:23 修改

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： javascript 前端 html

于 2020-08-17 13:59:15 首次发布

本文链接：https://blog.csdn.net/GUDUzhongliang/article/details/108054453

相信很多初学JavaScript的小伙伴们都有用到 document.write(),
它的基本作用：就是向文档中写入HTML表达式和JavaScript的代码。

基本语法：

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

支持输入多个字符串参数(其他类型会转为字符串格式输出);

用法还是相对比较简单，但是很多同学在使用的过程中，就会发现某些特定的情况下，使用document.write()向文档中写入内容时，document.write()中的内容会将文档中的原本内容给覆盖掉，对于初学JS的朋友来说可能摸不着头脑，下面就针对这个问题，做下简单的探讨。

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
	<meta charset="UTF-8">
	<title>document</title>
	<style>
	    * {
	        padding: 0;
		margin: 0;
	    }
	    .demo {
	        padding: 25px;
	        border: 1px dashed grey;
	    }
	</style>
    </head>
    <body>
	<div class="demo">
	    <button> 点击此按钮执行 </button>
	</div>
    </body>
    <script>
	document.write("我是JS中加载执行的内容<br>");
    </script>
    <s