什么时候应该使用 .innerHTML，什么时候应该在 JavaScript 中使用 document.write答案

【问题标题】：When should one use .innerHTML and when document.write in JavaScript什么时候应该使用 .innerHTML，什么时候应该在 JavaScript 中使用 document.write
【发布时间】：2012-04-10 07:55:42
【问题描述】：

有没有一个通用的规则，什么时候应该使用document.write来更改网站内容，什么时候应该使用.innerHTML？

到目前为止，我的规则是：

1) 添加新内容时使用document.write

2) 更改现有内容时使用.innerHTML

但我很困惑，因为有人告诉我一方面.innerHTML 是一个奇怪的Microsoft 标准，但另一方面我读到document.write 在XHTML 中是不允许的。

我应该使用哪些结构来使用 JavaScript 操作我的源代码？

【问题讨论】：

懒得深入研究（你可以用谷歌搜索为什么），但基本上永远不要使用 document.write。更多信息：stackoverflow.com/questions/802854/…（而且，与大多数绝对值一样，我并不是说永远不会。有它的用途，但不是很多。）

标签： javascript

【解决方案1】：

innerHTML 可用于通过字符串修改来更改 DOM 的内容。因此，如果您想在所选元素的末尾添加带有一些文本的段落，您可以这样做

document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'

虽然我建议尽可能多地使用特定于 DOM 操作的 API（例如 document.createElement、document.createDocumentFragment、<element>.appendChild 等）。但这只是我的偏好。

我唯一一次看到document.write 的适用用法是在HTML5 Boilerplate 中（看看它如何检查jQuery 是否正确加载）。除此之外，我会远离它。

【讨论】：

没有太多答案。所以 1：某种 DOM API，2：innerHTML 没问题，3：从不使用 document.write？

【解决方案2】：

innerHTML 和 document.write 并不是动态更改/插入内容的真正可比方法，因为它们的用法不同且用于不同的目的。

document.write 应该与特定的用例相关联。当页面已加载且 DOM 准备就绪时，您将无法再使用该方法。这就是为什么通常最常用于条件语句中，您可以在其中使用它来同步加载外部 javascript 文件（javascript 库），包括 <script> 块（例如，当您从 HTML5 Boilerplate 中的 CDN 加载 jQuery 时）。

当页面与 application/xhtml+xml mime 类型一起提供时，您所读到的有关此方法和 XHTML 的内容是正确的：来自 w3.org

document.write（如 document.writeln）在 XHTML 文档中不起作用（您将在错误控制台上收到“不支持操作”（NS_ERROR_DOM_NOT_SUPPORTED_ERR）错误）。如果打开具有 .xhtml 文件扩展名的本地文件或使用 application/xhtml+xml MIME 类型提供的任何文档，就会出现这种情况

这些方法的另一个区别在于插入节点：当您使用.innerHTML 方法时，您可以选择附加内容的位置，而使用 document.write 插入节点始终是使用此方法的文档。

【讨论】：

感觉复制粘贴的答案很难理解，但最后一个有意义
如您所见，唯一提到的部分是来自 w3.org 的块引用。随时指出我的答案的其他部分被复制和粘贴@PauliSudarshanTerho
是的，“当页面与 application/xhtml+xml mime 类型一起提供时，您所读到的有关此方法和 XHTML 的内容是正确的”与我无关。我又读了一遍，不明白，因为我不知道 XHTML 是什么。它没有太多可说的，因为它在非常罕见的情况下不起作用。
单个信息与您无关这一事实并不重要，并不意味着它是从另一个来源复制的。这是OP要求的信息，这就足够了。如果此答案与您无关，或者您不知道 xhtml 的含义，请跳至另一个答案。现在请，如果你仍然确定我复制了这篇文章，请随时标记我的抄袭答案，但准备好证明这一点，或者停止骚扰我。谢谢。
问题开始于“是否有一般规则”，但答案是关于罕见的特殊情况。我认为 PO 想知道“添加新内容时的 document.write”是否为真，为什么是，以及如何使用它而不是“不使用”答案或提及可能令人困惑的 jQuery、CDN、HTML5 样板。

【解决方案3】：

1) document.write() 将内容直接放到用户可以看到的浏览器中。

此方法将 HTML 表达式或 JavaScript 代码写入文档。

下面的例子只会将“Hello World”打印到文档中

<html>
  <body>
    <script>
    document.write("Hello World!");
    </script>
  </body>
</html>

2) document.innerHTML 改变元素的内部内容

它改变了元素的现有内容

下面的代码会改变p标签的内容

<html>
<body>
<p id="test" onclick="myFun()">Click me to change my HTML content or my inner HTML</p>
<script>
function myFun() {
  document.getElementById("test").innerHTML = "I'm replaced by exiesting element";
}
</script>
</body>
</html>

您可以在没有任何连接的 HTML 的情况下使用 document.write()，但如果您已经有想要更改的 HTML，那么 document.innerHTML 将是显而易见的选择。

【讨论】：

用代码明确答案并用自己的话+1解释！

【解决方案4】：

我同意上述cmets。基本上：

document.write 在页面加载时很有用，可以在浏览器构建文档对象模型时输出新的 HTML 标记或内容。该内容会在嵌入 JavaScript 语句的位置精确输出。
.innerHTML 可随时以字符串形式插入新的 HTML 标记/内容，并且无论何时/何地运行 JavaScript，都可以更轻松地将其定向到 DOM 中的特定元素。

一些附加说明...

当从 body 元素之外的脚本调用 document.write 时，如果在页面加载时调用，它的输出将附加到 body 元素；但是一旦页面被加载，同一个 document.write 将覆盖整个文档对象模型，从而有效地擦除您的页面。这一切都取决于 document.write 与页面加载的时间。

如果您使用 document.write 将新内容附加到 body 元素的末尾，则最好使用以下方法：

document.body.innerHTML += "A string of new content!";

这样比较安全。

【讨论】：