什么时候应该在 JavaScript 中使用 outerHTML？ [关闭]

Posted 2023-05-07

【中文标题】什么时候应该在 JavaScript 中使用 outerHTML？ [关闭]

【英文标题】：When should you use outerHTML in JavaScript? [closed]

【发布时间】：2011-01-29 19:38:16

【问题描述】：

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

【问题讨论】：

你可能想检查一下：***.com/questions/2474605/…

【参考方案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>

【参考方案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;

【讨论】：

有趣的想法。但是，由于大多数不支持 outerHTML 的浏览器都支持 HTMLElement 上的原型设计，我想知道以伪原生方式实现它是否更容易？

这将受益于解释，因为尚不清楚它如何在上下文中回答问题。也许问题已被编辑。

【参考方案3】：

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

【讨论】：

一年过去了，Chrome 和 Safari 似乎也实现了这个功能。但是，在撰写本文时，Firefox 还不支持它。

在Firefox 11 中添加了对outerHTML 的支持。