document.write

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

在MDN上找到相关说明

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


示例代码如下:

<html>
<head>
    <title>write example</title>
</head>

<body onload="newContent();">

    <h1>Origin</h1>

    <script type="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方法会更好。

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

19条评论

    1. 因为上次有同学跟我说这个看起来简单很多

  1. 看到你這些代碼教學,我突然好慚愧,愧對我買的《鋒利的jQuery》,我到現在都還沒有好好研究學習啊~不過等過陣子,要換新工作了,新的職場是做程序員助理,一切要努力學習,看樣子我得好好鑽研一番了 😳

    1. 🙂 这倒不是教学,只是自己的一些记录而已。
      又要换工作啦?

      1. 呵,能記錄,就代表自己懂得其中意思 😳

        對呀,要準備換工作了,下週一去面試,如果順利,我下個月初就轉到新公司上班。

        現在這家公司,唉,我不會說,總之就是及早走人的好 😡

  2. 😀 犀利的研究…不过我感觉开你网页好卡…打开你这个网页CPU直接彪到60%…有什么js在无限运行中?

  3. IE8 cpu60%
    chrome 18% 我勒个去 = =.区别挺大的..再换IE8看看去…

  4. IE8 下当窗口移动到评论这块的时候CPU直接60%…移动到文章部分 5%…移动下来的时候可以明显看出CPU的增加..

    1. 我当初做这个主题的时候没怎么考虑兼容性,只保证基本的布局;
      看了一下,在 IE 下,页面停留在评论这里的确 CPU 比文章高;
      应该不是 JS 的原因,因为我禁用了 JS 也没好转;
      回忆一下,我这里也没用太多的渲染效果啊 ❓
      先暂时不管吧 😎

      1. 😀 你当时出这个主题的时候 我就感觉好卡来着..今天刚好开着任务管理器..一看CPU吓到我了 ➡ 就顺便报告下bug了 😀

        1. 因为 IE 不是主力,所以一直都没发现,囧

  5. ready前的write是增加内容.ready后的write是重新填充内容.

评论已关闭。