当前位置：网站首页>document.write（）的用法-写入文本——修改样式、位置控制

document.write（）的用法-写入文本——修改样式、位置控制

2022-07-06 12:51:00 【viceen】

document.write（）的用法-写入文本——修改样式、位置控制

1、写入文本

页面加载中可以写入，而不会出现重写页面问题。

语法：document.write(content)
参数：
content：必选。字符串，可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言

利用 document.write()来写入文本

<body>
<h1>Head</h1>
    <script> document.write('<p>hello document</p>'); </script>
<h2>Tail</h2>
</body>

这是在h1和h2之间内嵌一个脚本，使用document.write()来写入一个p标签。

刷新页面，可以看到最终的结果是

Head
hello document
Tail

即文本在脚本执行的位置被插入。这是因为，浏览器就解析HTML构建DOM的时候，如果遇到script就会暂停下来，解析script中的代码并执行，然后再继续解析剩余HTML。(阻塞进行的)

此时再去浏览器中检测DOM的结构，会发现script与h2之间多了一个p，浏览器在解析完h1之后，碰到script并执行之，此时document.write将一段HTML代码写入到文档流中，script执行完毕后，浏览器会解析文档流中的字符串，对新添加的p标签进行解析。

<script>
    var sum_count="Sum:";
    document.write("<span>"+sum_count+"</span>")
</script>

<style>
span {
    
   display:inline-block;
   width: 30px;
}    
</style>
原网站

版权声明
本文为[viceen]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_44867717/article/details/125618443

边栏推荐

猜你喜欢

随机推荐