什么时候应该在 JavaScript 中使用外层 HTML？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2483429/
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 you use outerHTML in JavaScript?
提问by symfony
What are the differences between when you should use innerHTML and outerHTML. And how would you best implement the outerHTML to replace or add content?
什么时候应该使用innerHTML 和outerHTML 之间有什么区别。您将如何最好地实现 outerHTML 来替换或添加内容？
回答by tvanfosson
The outerHTML is the HTML of an element including the element itself. Contrast this with the innerHTML of the element, which is the HTML contained within an elements opening and closing tags. By definition, elements without both opening and closing tags do not have innerHTML.
外部HTML 是元素的HTML，包括元素本身。将此与元素的innerHTML 进行对比，后者是包含在元素开始和结束标记中的HTML。根据定义，没有开始和结束标签的元素没有innerHTML。
Use the outerHTML when you want to completely replace an element and its contents.
当您想要完全替换元素及其内容时，请使用 outerHTML。
You might do this if you have a loading section. The new content with the outerHTML replaces it.
如果您有加载部分，则可以执行此操作。带有outerHTML 的新内容将替换它。
<div id="exampleA" class="styleA">
<p>Here could be a default message where the div has specific styling. These are useful for things like default error or loading messages.</p>
</div>
<script>
document.getElementById("exampleA").outerHTML = '<div id="welcome" class="styleB">Welcome to the site</div>';
</script>
Use innerHTML when you only want to replace the contents inside the element.
当您只想替换元素内的内容时，请使用 innerHTML。
An example of this would be if you have default content, but new data could at any point replace it.
例如，如果您有默认内容，但新数据可以随时替换它。
<h2>Today's Coffees</h2>
<ul id="exampleB"><li>House Blend</li></ul>
<script>
document.getElementById("exampleB").innerHTML = '<li>Sumatra blend</li><li>Kenyan</li><li>Colombian medium blend</li>';
</script>
回答by kennebec
function getHTML(node){
if(!node || !node.tagName) return '';
if(node.outerHTML) return node.outerHTML;
// polyfill:
var wrapper = document.createElement('div');
wrapper.appendChild(node.cloneNode(true));
return wrapper.innerHTML;
}
回答by Phil Ross
outerHTMLwas originally a non-standard Internet Explorer property of an element, but now has cross-browser support. It returns the HTML of the element and its child elements. For elements that have parents, it can be set to replace the element and its descendants.
outerHTML最初是元素的非标准 Internet Explorer 属性，但现在具有跨浏览器支持。它返回元素及其子元素的 HTML。对于有父元素的元素，它可以设置为替换元素及其后代。
回答by Darlesson
Most of the most popular browsers support outerHTML. Firefox is an exception. For more information about outerHTML browser support visit http://www.quirksmode.org/dom/w3c_html.html.
大多数最流行的浏览器都支持outerHTML。火狐浏览器是个例外。有关 outerHTML 浏览器支持的更多信息，请访问http://www.quirksmode.org/dom/w3c_html.html。
If you can add jQuery to your page I recommend to include the plugin jQuery outerHTML.
如果您可以将 jQuery 添加到您的页面，我建议包含插件jQuery outerHTML。
