Javascript innerHTML vs outerHTML

Question

我有以下javascript:

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

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

我想设置文章的内容,并添加一些类,所以我正在考虑两种方式:

// 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部分,并且有一个细微的情况,它更可取.

我的问题是这些技术中的一种是否优于另一种？将元素添加到DOM然后更改它的HTML是一个问题吗？或者从性能角度来看,在写入DOM之前设置innerHTML是否更好？

Answer 1

来自MDN -site：

innerHTML

• 该Element.innerHTML属性设置或获取描述元素后代的HTML语法。

注意：如果<div>，<span>,或者<noembed>节点具有包括字符的子文本节点(&), (<),或(>)，innerHTML返回这些字符作为＆安培，及分别LT和大于。使用Node.textContent获得的这些文本节点的内容的正确副本。

外层HTML

DOM接口的outerHTML属性element获取描述元素（包括其后代）的序列化HTML片段。可以设置为将元素替换为从给定字符串解析的节点。

innerHTML与externalHTML：

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>