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.write，document.open会自动先运行，而写入结束后，document.close也将自动运行。

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

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

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

19条评论

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

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

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

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

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

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

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

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

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

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

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

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

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

评论已关闭。