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>";

两者都很好用，但我注意到在将元素附加到DOM之前需要调用.innerHTML，而在添加到DOM之后需要调用outerHTML。

我更喜欢第二个选项，因为我实际上在这个javascript文件中渲染了Rails部分，并且这是一个细微的情况，它更适合。

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

Answer 1

取自 MDN -site：

的innerHTML

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

注意：如果<div>，<span>,或<noembed>节点有子文本节点，包含字符(&), (<),或(>)，innerHTML会返回这些字符字符分别为＆amp; amp，＆amp; lt和＆amp; gt。使用Node.textContent来获得这些文本节点内容的正确副本。

outerHTML

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

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将内容解析为HTML并完全销毁该元素并重新创建它，它还会销毁可能为该元素注册的任何事件处理程序等。使用outerHTML，元素集仍将保留对原始元素（如果有）的引用。

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

Answer 3

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

如果您要将决策权转移到JavaScript方面，良好的编码实践将指示手动创建所有节点。如果您正在处理100个元素插入，那么您会注意到速度的差异（如果您要对两个解决方案进行测试）。

Javascript innerHTML vs outerHTML

3 个答案:

的innerHTML

outerHTML