全面理解document.write()
W3C 标准
WHATWG: write()
定义和用法
文档节点的write()
方法用于写入文档内容,可以传多个参数,写入的字符串会按HTML
解析。
- 语法:
document.write()
- 参数:字符串,可以传多个字符串参数
- 返回值:
undefined
注意事项
如果
document.write()
在DOMContentLoaded
或load
事件的回调函数中,当文档加载完成,则会先清空文档(自动调用document.open()
),再把参数写入body
内容的开头。在异步引入的js和
DOMContentLoaded
或load
事件的回调函数中运行document.write()
,运行完后,最好手动关闭文档写入(document.close()
)。
示例代码
在head
中运行document.write()
,则参数写在body
内容的开头。
<!-- 运行前 -->
<head><script>document.write('<p>test</p>');</script>
</head>
<body><h2>write()</h2>
</body><!-- 运行后 -->
<head><script>document.write('<p>test</p>');</script>
</head>
<body><p>test</p><h2>write()</h2>
</body>
在body
中运行document.write()
,则参数写在运行的script标签后面
<!-- 运行前 -->
<div><script>document.write('<p>test</p>');</script><p>content</p>
</div><!-- 运行后 -->
<div><script>document.write('<p>test</p>');</script><p>test</p><p>content</p>
</div>
同步引用外部js
,参数也是写在运行的script
标签后面
// syncWrite.js
document.write('<p>test</p>');
<!-- syncWrite.html -->
<!-- 运行前 -->
<body><script src="syncWrite.js"></script><p>content</p>
</body><!-- 运行后 -->
<body><script src="syncWrite.js"></script><p>test</p><p>content</p>
</body>
异步引用外部js,必须先运行document.open()
清空文档,然后才能运行document.write()
,参数写在body
内容的开头。
如果不先运行document.open()
,直接运行document.write()
,则无效且Chrome
有如下提示:
// asyncWrite.js
document.open();
document.write('<p>test</p>');
document.close();
<!-- asyncWrite.html -->
<!-- 运行前 -->
<body><script src="asyncWrite.js" async></script>
</body><!-- 运行后 -->
<body><p>test</p>
</body>
如果document.write()
在DOMContentLoaded
或load
事件的回调函数中,则不管是在head
中,body
中,同步的js
中,异步的js
中,都会先清空文档(自动调用document.open()
),然后运行document.write()
,参数写在body
内容的开头
<!-- 运行前 -->
<body><script>window.addEventListener('load', function () {document.write('<p>test</p>');document.close();}, false);</script>
</body><!-- 运行后 -->
<body><p>test</p>
</body>
document.write()
也能写入含有script
标签的字符串,但是需要转义。写入的script
标签中的内容会正常运行。
<!-- 运行前 -->
<script>document.write('<script>document.write("<p>test</p>");<\/script>');
</script><!-- 运行后 -->
<script>document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>
document.write()
可以传入多个参数。
<!-- 运行前 -->
<body><script>document.write('<h2>multiArgument</h2>','<p>test</p>');</script>
</body><!-- 运行后 -->
<body><script>document.write('<h2>multiArgument</h2>','<p>test</p>');</script><h2>multiArgument</h2><p>test</p>
</body>
全面理解document.write()相关推荐
- document.all与WEB标准
1.DOM WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[].DOM--DOCUMENT OBJECT MODEL文档对象模型,提供了访问文档对象的方法.例 ...
- document.all
1.DOM WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[].DOM--DOCUMENT OBJECT MODEL文档对象模型,提供了访问文档对象的方法.例 ...
- mysql创建用户并授登录权限_mysql创建用户并授予权限
Creating Classes 创建类 The dojo/_base/declare module is the foundation of class creation within the Do ...
- jQuery源码dom ready分析
一.前言 在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前 ...
- ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
- catia知识工程_【开团】CATIA超全直播课程&实例讲解!
为了广大盟友的学习需求 我们特别为盟友们准备这次 "超值.超全.超量" 的CATIA全面直播课 更是业界大牛:小狼老师 全程授课! 越多报名! 越多优惠! (开团人数只要达到折扣要 ...
- 前端开发面试题及答案整理
前端开发面试题及答案整理 文章目录 一些开放性题目 position的值, relative和absolute分别是相对于谁进行定位的? 如何解决跨域问题 XML和JSON的区别? 谈谈你对webpa ...
- 项目构建工具--webpack
什么是webpack Webpack是一个模块打包器(bundler).在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理编译打包,它将根据 ...
- 【JavaWeb】前置知识:CSS与JavaScript知识汇总
本文被 系统学习JavaWeb 收录,点击订阅 写在前面 大家好,我是黄小黄!经过上一篇 从Html入门JavaWeb 的学习,想必大家对标签都有了一定的认识.本文将通过案例,讲解CSS与JavaS ...
最新文章
- python是高级动态编程语言-python是一种跨平台、开源、免费的高级动态编程语言,对么...
- 来吧!我教你画真正的流程图
- redis设置为控制台打印日志
- 线序及模式配置Linux,[CCNA图文笔记]-1-水晶头线序及设备互联法则
- SSLRobot:适用于HttpWatch的免费SSL / TLS测试工具
- Node.js验证码模块captchapng
- 华中师范大学 -技术类-- 导师信息
- OTP(OneTimeProgrammable)开发之义隆仿真器
- Vue keep-alive组件缓存 基础用法
- 在android中在屏幕密度为160,在 android 中,在屏幕密度为160时,1pt 大概等于多少sp...
- HTML前端开发入门之表单标签/labei标签/datalist标签
- 使用Wifi pineapple(菠萝派)进行Wi-Fi钓鱼攻击
- 1月第1周业务风控关注 | 四部门联合印发App违法违规收集使用个人信息行为认定方法
- GitHub使用教程详细图解
- (一)微信小程序云开发之上传图片(全流程讲解)
- 【小工具类】将一个十进制数转化成二进制/四进制/八进制/16进制
- 什么是缓冲区溢出?(一)
- PAP和CHAP认证方式
- 微信交电费访问服务器失败,微信怎么交电费?操作步骤,常见问题说明
- C++PRIMER 学习笔记