javascript - document.write 错误？答案

【问题标题】：javascript - document.write error?javascript - document.write 错误？
【发布时间】：2010-07-13 10:46:54
【问题描述】：

考虑脚本..

<html>
<head>
   <script type="text/javascript">
        document.write('TEST');
   </script>
</head>

<body>
    Some body content ...
</body>

</html>

这很好用，“TEST”这个词被添加到<body>

但是当

<script type="text/javascript">
    window.onload = function(){
        document.write('TEST');
    }
</script>

被使用，然后正文内容被单词“TEST”完全替换，即，旧的正文内容被删除，只添加单词“TEST”。

只有在 window.onload 函数中调用 document.write 时才会发生这种情况

我在 chrome 中试过这个。我有什么错误吗？有什么建议吗？

【问题讨论】：

标签： javascript function window onload

【解决方案1】：

document.write() 在文档解析完成并关闭后使用是不稳定的。该行为是不可预测的跨浏览器，您根本不应该使用它。改用innerHTML 或createElement/createTextNode 操作DOM。

来自Mozilla documentation：

在没有调用 document.open() 的情况下写入已经加载的文档将自动执行 document.open 调用。完成编写后，建议调用 document.close()，告诉浏览器完成页面加载。您编写的文本将被解析为文档的结构模型。在上面的示例中， h1 元素成为文档中的一个节点。

如果 document.write() 调用直接嵌入在 HTML 代码中，则不会调用 document.open()。

等效的 DOM 代码是：

window.onload = function(){
    var tNode = document.createTextNode("TEST");
    document.body.appendChild(tNode);
}

【讨论】：

【解决方案2】：

在第一种情况下，单词没有写在正文中.. 它写在头部
第一个有效，因为文档仍处于打开状态以进行写入。一旦完成（已加载 DOM），文档就会关闭，并通过尝试对其进行写入来替换它..

【讨论】：

【解决方案3】：

当文档完全加载时，对document.write() 的任何进一步调用都将覆盖文档内容。您必须在调用document.write() 之前使用document.close() 以避免覆盖。

【讨论】：

【解决方案4】：

首先创建一个元素，例如一个 div，然后使用 window.onload 事件向 div 添加内容。

document.write('<div id="afterpostcontent"><\/div>');
window.onload = function()
{
    document.getElementById('afterpostcontent').innerHTML = '<span>TEST<\/span>';
}

您可以使用此内容创建一个外部 JavaScript 文件，然后在任何地方调用它，例如：

<script src="afterpostcontentcode.js"></script>

【讨论】：