[解決済み] JavascriptのinnerHTMLとouterHTMLの比較

質問

以下のようなjavascriptがあります。

// create a new article tag
var elem = document.createElement('article');

// append the article to the comments list
document.querySelector('#comments-list').appendChild(elem);

記事の内容を設定し、いくつかのクラスも追加したいので、これを行うための2つの方法を検討しています。

// Option 1
// set the content using .innerHTML()
// and add the classes manually to the classList 
elem.innerHTML = "This is the comment";
elem.classList.add('comment'); 

// Option 2
// set the content and classes in one go using .outerHTML()
elem.outerHTML = "<article class='comment'>This is the comment</article>";

どちらもうまくいくのですが、気がつくと .innerHTML は要素が DOM に追加される前に呼び出される必要があります。 outerHTML は、DOM に追加された後に呼び出される必要があります。

実際にこのjavascriptファイルでRailsパーシャルをレンダリングしているので、2番目のオプションが望ましいというニュアンスもありますね。

質問は、これらのテクニックのうち、どちらか一方が優れているかどうかということです。DOMに要素を追加して、その後にHTMLを変更することは問題なのでしょうか？それとも、DOM に書き込む前に innerHTML を設定する方がパフォーマンスの観点からは良いのでしょうか？

解決方法は？

から引用しています。 MDN -サイト :

インナーHTML

• は Element.innerHTML プロパティは、その要素の子孫を記述する HTML 構文を設定または取得します。

注意：もし <div> , <span>, または <noembed> ノードは、以下のような子テキストノードを持ちます。 という文字が含まれています。 (&), (<), または (>) , innerHTML はこれらの は、それぞれ &amp, &lt, &gt となります。使用方法 Node.textContent を使用すると は、これらのテキストノードの内容を正しくコピーすることができます。

アウターHTML

は outerHTML 属性は element DOM インターフェースは、その要素を記述した HTML フラグメントを、その子孫も含めてシリアライズして取得します。これは、与えられた文字列から解析されたノードで要素を置き換えるために設定することができます。

インナーHTML vs. アウターHTML :

使用方法 innerHTML をデフォルトで使用します。これは のみ コンテンツ（"="を使用する場合）。 内側 参照される現在の要素。を使用している場合 outerHTML を指定した場合、その 要素 を参照すると また が置き換わる。

デモの様子

var h20 = document.getElementById("h20"),
    h21 = document.getElementById("h21");
var ran = false;

console.log("'h20' innerHTML (1) =", "'" + h20.innerHTML + "'", "outerHTML (1) =", "'" + h20.outerHTML + "'");
console.log("'h21' innerHTML (1) =", "'" + h21.innerHTML + "'", "outerHTML (1) =", "'" + h21.outerHTML + "'");

document.getElementById("button").onclick = evt => {
    if (ran) return false;
    
    h20.innerHTML = "<div>innerHTML</div>";
    h21.outerHTML = "<div>outerHTML</div>";
    
    console.log("'h20' innerHTML (2) =", "'" + h20.innerHTML + "'", "outerHTML (2) =", "'" + h20.outerHTML + "'");
    console.log("'h21' innerHTML (2) =", "'" + h21.innerHTML + "'", "outerHTML (2) =", "'" + h21.outerHTML + "'");
    
    ran = true
}

<button id="button">innerHTML vs. outerHTML</button>
<br>
<h2 id="h20"></h2>
<h2 id="h21"></h2>