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

Question

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

Answer 1

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

当您想要完全替换元素及其内容时，请使用 outerHTML。

如果你有一个加载部分，你可以这样做。带有外层HTML 的新内容将替换它。

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

当您只想替换元素内的内容时，请使用 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>

Answer 2

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

Answer 3

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