jQuery的ready使用document.write的问题

document.write(markup)是一个比较常用的语句,不过对它的规定其实没真正看过,直到看到有人问在jQuery的ready使用document.write的问题才令我想起去看看语言定义。

在MDN上找到相关说明

向由document.open打开的文档流写入字符串。


示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>write example </title>
</head>

<bodyonload="newContent();">

<h1>Origin </h1>

<scripttype="text/javascript">

       document.write("document.write"); // 第一次write

       function newContent(){
           alert("load new content");
           document.open();
           document.write(" <h1>Out with the old - in with the new! </h1>");
           document.close();
       }
</script>

<p>Some original document content. </p>
</body>
</html>


运行上面代码,将会看到页面输出Origin的内容,同时弹出对话框;当点击确定后页面内容将变为新的h1的内容,而原来的内容消失。

可以看到的是,第一次document.write的内容是直接附加到文档流中,而第二次则是冲掉了原来的文档流。这里很关键的一个就是document.open()这语句。

参照MDN说明,document.open()将会打开一个文档流来输入内容,当文档已存在的时候,则先清空。并且,当页面已经加载完成时调用document.writedocument.open会自动先运行,而写入结束后,document.close也将自动运行。

故上面的代码中,第二次write是绑定在load事件,文档已加载完,document.open将会清空原文档内容然后写入新内容。事实上,这种情况下不用显式调用document.opendocument.close

根据以上内容,在jQuery中使用document.write会出现问题的原因就不言而喻了。因为在使用jQuery的时候,一般我们都是在$(document).ready()中写相关代码,而这时文档结构已完成,使用document.write将会清空文档。如果使用jQuery的时候需要附加写入内容,使用append方法会更好。

最后,还是那句话,每一门实用的语言都是博大精深的。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值