什么时候应该在JavaScript中使用outerHTML？

什么时候应该使用innerHTML和outerHTML有什么区别。如何最好地实现outerHTML来替换或添加内容？

outerHTML是包含元素本身的元素的HTML。这与元素的innerHTML形成对比，后者是包含在元素打开和关闭标记中的HTML。根据定义，没有开始标记和结束标记的元素没有innerHTML

如果要完全替换元素及其内容，请使用outerHTML。

如果您有一个加载部分，您可以这样做。带有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>

这里可能是一条默认消息，其中div具有特定的样式。这些对于默认错误或加载消息之类的事情很有用

document.getElementById（“exampleA”）.outerHTML='Welcome to the site'；

当您只想替换元素中的内容时，请使用innerHTML。

例如，如果您有默认内容，但新数据可以随时替换它

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

今天的咖啡
家庭混合
document.getElementById（“exampleB”）.innerHTML='
苏门答腊混合
肯尼亚
哥伦比亚中混合
'；

最初是元素的非标准Internet Explorer属性，但现在具有跨浏览器支持。它返回元素及其子元素的HTML。对于具有父元素的元素，可以将其设置为替换元素及其子元素。

您可能需要检查以下内容：有趣的想法。然而，由于大多数不支持outerHTML的浏览器都支持在HtmleElement上进行原型设计，我想知道以伪本机方式实现它是否更容易？这将得益于一个解释，因为不清楚它在上下文中如何回答这个问题。一年过去了，Chrome和Safari似乎也实现了这个功能。但是，在撰写本文时，Firefox不支持它。中添加了对的支持。

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