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将分别以&、<和>的形式返回这些字符。使用Node.textContent获取这些文本节点内容的正确副本。

outerHTML

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

innerHTML 与 outerHTML：

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

​

Answer 2

我想说这两者可能都不是您想要的，使用textContent或其他任何属性来处理元素的文本。

elem.textContent = "This is the comment";
elem.classList.add("comment"); 

innerHTML将内容解析为超文本标记语言，并完全销毁该元素并重新创建它，它还销毁可能为该元素注册的任何事件处理程序等。使用outerHTML时，元素集仍然保留对原始元素(如果有的话)的引用。

因此，两者都可能有意外的副作用，而不是设置文本内容的正确属性。

Answer 3

根据OP的问题、评论和一个很好的答案，在这种情况下，您最好使用elem.outerHTML，因为您可以/可以在Rails中预先解析您的输入。

如果您要将决策转移到JavaScript端，那么良好的编码实践将要求手动创建所有节点。如果您正在处理100个元素插入，那么您将注意到速度上的差异(如果您要对两个解决方案进行基准测试)。