什么时候应该使用 .innerHTML ，什么时候使用 JavaScript 中的 document.write
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10085109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When should one use .innerHTML and when document.write in JavaScript
提问by R_User
Is there a general rule, when one should use document.writeto change the website content and when to use .innerHTML?
是否有一般规则，何时应该使用document.write来更改网站内容以及何时使用.innerHTML？
So far my rules were:
到目前为止，我的规则是：
1) Use document.writewhen addingnew content
1)添加新内容document.write时使用
2) Use .innerHTMLwhen changingexisting content
2)改变现有内容.innerHTML时使用
But I got confused, since someone told me that on the one hand .innerHTMLis a strange Microsoft standard, but on the other hand I read that document.writeis not allowed in XHTML.
但我感到困惑，因为有人告诉我，一方面.innerHTML是一个奇怪的微软标准，但另一方面我读到document.write了 XHTML 中不允许的。
Which structures should I use to manipulate my source code with JavaScript?
我应该使用哪些结构来使用 JavaScript 操作我的源代码？
采纳答案by Trevor Norris
innerHTMLcan be used to change the contents of the DOM by string munging. So if you wanted to add a paragraph with some text at the end of a selected element you could so something like
innerHTML可用于通过字符串修改来更改 DOM 的内容。因此，如果您想在所选元素的末尾添加带有一些文本的段落，您可以这样做
document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'
document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'
Though I'd suggest using as much DOM manipulation specific API as possible (e.g. document.createElement, document.createDocumentFragment, <element>.appendChild, etc.). But that's just my preference.
虽然我建议使用尽可能多的DOM操作特定的API尽可能（例如document.createElement，document.createDocumentFragment，<element>.appendChild等）。但这只是我的偏好。
The only time I've seen applicable use of document.writeis in the HTML5 Boilerplate(look at how it checks if jQuery was loaded properly). Other than that, I would stay away from it.
我唯一一次document.write在HTML5 Boilerplate 中看到了适用的用法（看看它如何检查 jQuery 是否正确加载）。除此之外，我会远离它。
回答by Fabrizio Calderan
innerHTMLand document.writeare not really comparable methods to dynamically change/insert content, since their usage is different and for different purposes.
innerHTML并且document.write不是动态更改/插入内容的真正可比方法，因为它们的用法不同且用于不同的目的。
document.writeshould be tied to specific use cases. When a page has been loaded and the DOM is readyyou cannot use that method anymore. That's why is generally most used in conditional statements in which you can use it to syncronously load external javascript file (javascript libraries), including <script>blocks (e.g. when you load jQuery from the CDN in HTML5 Boilerplate).
document.write应该绑定到特定的用例。当页面加载完毕并且 DOM准备就绪后，您将无法再使用该方法。这就是为什么通常最常用于条件语句中，您可以使用它来同步加载外部 javascript 文件（javascript 库），包括<script>块（例如，当您从 CDN 中加载 jQuery 时HTML5 Boilerplate）。
What you read about this method and XHTML is true when the page is served along with the application/xhtml+xmlmime type: From w3.org
当页面与application/xhtml+xmlmime 类型一起提供时，您对这种方法和 XHTML 的了解是正确的：来自w3.org
document.write (like document.writeln) does not work in XHTML documents (you'll get a "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type
document.write（如 document.writeln）在 XHTML 文档中不起作用（您将在错误控制台上收到“不支持操作”（NS_ERROR_DOM_NOT_SUPPORTED_ERR）错误）。如果打开带有 .xhtml 文件扩展名的本地文件或使用 application/xhtml+xml MIME 类型提供的任何文档，就会出现这种情况
Another difference between these approaches is related on insertion node: when you use .innerHTMLmethod you can choose where to append the content, while using document.write the insertion node is always the part of document in which this method was used.
这些方法之间的另一个区别与插入节点有关：当您使用.innerHTMLmethod 时，您可以选择将内容附加到何处，而使用 document.write 插入节点始终是使用此方法的文档的一部分。
回答by Mohammed Muzammil
1) document.write() puts the contents directly to the browser where the user can see it.
1) document.write() 将内容直接放到浏览器中，用户可以看到它。
this method writes HTML expressions or JavaScript code to a document.
此方法将 HTML 表达式或 JavaScript 代码写入文档。
The below example will just print ‘Hello World' into the document
下面的示例将仅将“Hello World”打印到文档中
<html>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>
2) document.innerHTML changes the inner content of an element
2) document.innerHTML 改变一个元素的内部内容
It changes the existing content of an element
它改变了元素的现有内容
The below code will change the content of p tag
下面的代码将改变 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>
you could use document.write() without any connected HTML, but if you already have HTML that you want to change, then document.innerHTML would be the obvious choice.
您可以在没有任何连接的 HTML 的情况下使用 document.write()，但如果您已经有要更改的 HTML，那么 document.innerHTML 将是显而易见的选择。
