setTimeout() 中的 document.write() 覆盖所有页面 [重复]答案

【问题标题】：document.write() inside setTimeout() overwrite all page [duplicate]setTimeout() 中的 document.write() 覆盖所有页面 [重复]
【发布时间】：2017-08-18 13:51:26
【问题描述】：

我用 document.write() 调用函数来添加内联内容（广告横幅）：

<body>
Page content start<br>
    <script>
    function postContent(){
      document.write('added content');
    }
    postContent();
    </script>
<br>Page content end
</body>

在我得到的页面上：

Page content start 
added content
Page content end

我想延迟添加此内容，但在 setTimeout() document.write() 内会覆盖所有内容。

<body>
Page content start<br>
<script>
    function postContent(){
        document.write('added content');
    }
    setTimeout(function () {
        postContent();
    }, 3000);
</script>
<br>Page content end
</body>

我在 3 秒内进入页面：

added content

如何延迟调用 document.write() 函数而不覆盖所有页面？

注意：我无权使用插入广告横幅的功能。

【问题讨论】：

你需要使用document.write()本身吗？
insertAdjacentHtml 怎么样？
在 HTML 文档完全加载后使用 document.write()，将删除所有现有的 HTML。

标签： javascript jquery html

【解决方案1】：

您可以使用跨度并使用innerHTML 将行写入其中。

write() 函数第一次起作用，因为它与文档同时加载，因此在其间添加了行。

第二次重新加载文档时删除所有 html。

<body>
Page content start<br>
<span id="pid"></span>
<script>
    function postContent(){
        document.getElementById("pid").innerHTML='added content';
    }
    setTimeout(function () {
        postContent();
    }, 3000);
</script>
<br>Page content end
</body>

【讨论】：

【解决方案2】：

如果您在加载文档后运行document.write - 它会覆盖整个文档。所以，你应该选择一个特定的元素，并在其中添加内部 html 文本：

document.getElementById("container").innerHTML="added content";

【讨论】：