19

innerHTML と outerHTML を使用する必要がある場合の違いは何ですか。また、outerHTML を実装してコンテンツを置換または追加するにはどうすればよいでしょうか?

4

3 に答える 3

28

outerHTML は、要素自体を含む要素の HTML です。これを、要素の開始タグと終了タグ内に含まれる HTML である、要素の innerHTML と比較してください。定義上、開始タグと終了タグの両方がない要素には、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>

要素内のコンテンツのみを置き換えたい場合は、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>
于 2010-03-20T14:51:24.580 に答える
13 
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;
}
于 2010-03-20T15:07:32.467 に答える
8

outerHTMLは、元々 Internet Explorer の要素の非標準プロパティでしたが、現在はクロスブラウザーをサポートしています。要素とその子要素の HTML を返します。親を持つ要素の場合、要素とその子孫を置き換えるように設定できます。

于 2010-03-20T14:53:31.800 に答える