JavaScript中应该何时使用.innerHTML和何时使用document.write？

Question

JavaScript中应该何时使用.innerHTML和何时使用document.write？

javascript

16

在使用JavaScript操作网页内容时，什么情况下应该使用document.write，什么情况下应该使用.innerHTML并没有统一的规定。

以前我的做法是：

1) 当需要添加新内容时，使用document.write

2) 当需要修改现有内容时，使用.innerHTML

但是，我现在感到困惑了。有人告诉我，.innerHTML是微软的奇怪标准，而另外一些人则说，document.write在XHTML中不被允许。

那么，我应该如何使用JavaScript来操作我的源代码呢？

- R_User

4

懒得深入讲解（你可以搜索一下原因），但基本上永远不要使用 document.write。更多信息请参见：https://dev59.com/l3RA5IYBdhLWcg3w2xwI（像大多数绝对说法一样，实际上并不是完全禁止使用。还是有一些用途的，只是非常少见。） - Corbin

4个回答

12

innerHTML 可以通过字符串操作来改变DOM内容。所以，如果你想在选定的元素末尾添加一段文本，可以这样做：

document.getElementById('some-id').innerHTML += '<p>这里是一些文本</p>'

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

我见过唯一适用于document.write的情况是在HTML5 Boilerplate（查看它如何检查jQuery是否正确加载）。除此之外，我会避免使用它。

- Trevor Norris

1

不是很有意义的回答。所以1：使用某种DOM API，2：innerHTML可以，3：永远不要使用document.write？ - user985399

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.innerHTML是一个显而易见的选择。虽然你也可以在没有连接任何HTML的情况下使用document.write()，但这种方式并不常用。

- Mohammed Muzammil

1

清晰的答案配合代码和自己的话语解释 +1！ - user985399

0

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

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

还有一些额外的注意事项...

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

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

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

这样会更安全一些。

- tdv

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabrizio Calderan · Accepted Answer

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

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

关于这种方法和XHTML的阅读是正确的，当页面随着 application/xhtml+xml MIME 类型一起提供时：来自w3.org

document.write（如document.writeln）在 XHTML 文档中无法工作（您将在错误控制台上获得“Operation is not supported”（NS_ERROR_DOM_NOT_SUPPORTED_ERR）错误）。如果使用 .xhtml 文件扩展名打开本地文件或任何使用 application/xhtml+xml MIME 类型提供的文档，则是这种情况

这些方法之间的另一个差异与插入节点有关：当您使用 .innerHTML 方法时，可以选择在何处附加内容，而使用 document.write 时，插入节点始终是在使用此方法的文档部分中。