Question

是否有一般规则，何时应使用document.write更改网站内容以及何时使用.innerHTML？

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

1）添加新内容

时使用document.write

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

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

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

Answer 1

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时，插入节点始终是使用此方法的文档的一部分。

Answer 2

innerHTML可用于通过字符串munging来更改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是否正确加载）。除此之外，我会远离它。

Answer 3

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

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

下面的示例仅将“ Hello World”打印到文档中

<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>

2）document.innerHTML更改元素的内部内容

它将更改元素的现有内容

下面的代码将更改p标签的内容

{items.children[this.state.selected].children[this.state.itemSelected].children

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

Answer 4

我同意以上评论。基本上：

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

一些附加说明...

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

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

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

这样更安全一些。

什么时候应该使用.innerHTML和JavaScript中的document.write

4 个答案: