document.write() 覆盖整个页面答案

【问题标题】：document.write() overwrites entire pagedocument.write() 覆盖整个页面
【发布时间】：2017-10-31 20:32:26
【问题描述】：

所以，我试图让 HTML 在单击按钮时出现，但不是在脚本标记所在的位置插入 HTML，而是整个页面被应该生成的代码覆盖。经过实验，我发现像这样简单的东西

document.write("<p>" + "Hello!" + "</p>")

只需按应有的方式插入即可。另一方面，我试图做的代码替换了整个页面。

有谁知道如何解决这个问题？这是一些示例代码。

function writeIFrame() {
    document.write('<iframe width="500" height="300" src="https://www.youtube.com/embed/UJFdywQqovI" frameborder="0" allowfullscreen></iframe><p>Check out my YouTube channel <a href="https://www.youtube.com/channel/UCkqJM5HVjuvPA9H1VuFU5pQ">here</a> and subscribe!');
}

【问题讨论】：

document.write() 不是处理页面内容的好方法。您可以通过使用内置方法或使用 jQuery 之类的库来更有效地操作 DOM。
简单：don't use it 用于 DOM 操作。
@HoboSapiens 感谢您提供的信息。我最近一直在学习 jQuery。您认为哪些命令更适合添加到 DOM 并且效率最高？
@duskwuff 你做了什么使 HTML 标记引用正确显示？
@TheMinecrafterandBlendmist 将它放在一个有四个空格缩进的块中。点击“edited … ago”链接通知了解详情。

标签： javascript html document.write

【解决方案1】：

取决于调用函数的位置。

如果在 html 加载完成后调用 document.write。它会覆盖整个页面。（因为在关闭 html 标签后附加它会导致语法错误，因此这样做没有意义。）

【讨论】：

【解决方案2】：

自从你问这个问题已经两年了，我想你会知道答案，但我看到没有人回答正确： document.write() 将总是覆盖所有文档。

按照您的要求，最好的方法是使用带有“+=”的 .innerHTML 方法，例如：

document.getElementById("test").innerHTML+= "Hi!";

然后你将拥有：

<p id="test"> Hi! </p>

请注意+= 将始终保留已写入的内容。如果我们想替换 <p> 标签内的内容，我们必须只使用 =。

我知道你现在肯定会知道这一点，但我希望有人能找到这个问题，也许能得到一个很好的答案。 :)

【讨论】：

已有正确答案。它并不总是覆盖整个文档，只有在调用 document.close() 之后才调用它。浏览器在完成 HTML 解析后调用document.close()。