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

我想设置文章的内容，并向其中添加一些类，因此我考虑两种方法：

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

//选项1
//使用.innerHTML（）设置内容
//并将这些类手动添加到类列表中
elem.innerHTML=“这是注释”；
元素classList.add（'comment'）；
//选择2
//使用.outerHTML（）一次性设置内容和类
elem.outerHTML=“这是注释”；

这两种方法都非常有效，但我注意到在将元素附加到DOM之前需要调用

.innerHTML

，而在将元素添加到DOM之后需要调用

outerHTML

我更喜欢第二个选项，因为我实际上是在这个javascript文件中呈现Rails片段，有一个细微的例子更可取

---

我的问题是这些技术中的一种是否比另一种好？将元素添加到DOM中，然后更改其HTML是否有问题？还是从性能角度来看，在写入DOM之前设置innerHTML更好？

摘自MDN-站点：

innerHTML

• Element.innerHTML

  属性设置或获取描述元素子体的HTML语法

注意：如果

、

、

或

节点有一个子文本节点 包括字符

（&），（）

，

innerHTML

返回这些字符 字符分别为&、<和>。使用

Node.textContent

获取这些文本节点内容的正确副本

外层TML

element

DOM接口的

outerHTML

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

innerHTML与outerHTML的对比：

默认使用

innerHTML

。这将仅替换内容（如果在引用的当前元素中使用“=”）。如果您使用的是

outerHTML

，则引用的元素也将被替换

演示：

var h20=document.getElementById（“h20”），
h21=document.getElementById（“h21”）；
var-ran=false；
log（“'h20'innerHTML（1）='、“'+h20.innerHTML+”、“outerHTML（1）='、“'+h20.outerHTML+”）；
log（“'h21'innerHTML（1）='、“'+h21.innerHTML+”、“outerHTML（1）='、“'+h21.outerHTML+”）；
document.getElementById（“按钮”）.onclick=evt=>{
如果（ran）返回false；
h20.innerHTML=“innerHTML”；
h21.outerHTML=“outerHTML”；
log（“'h20'innerHTML（2）='、“'+h20.innerHTML+”、“outerHTML（2）='、“'+h20.outerHTML+”）；
log（“'h21'innerHTML（2）='、“'+h21.innerHTML+”、“outerHTML（2）='、“'+h21.outerHTML+”）；
然=真
}

innerHTML与outerHTML

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

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

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

---

因此，与设置文本内容的正确属性相比，两者都可能产生意外的副作用。

根据OP问题、其注释和一个好答案，在这种情况下，最好使用

elem.outerHTML

，因为您可以在Rails中预解析输入

---

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

您确实提到过，可以在元素未连接到DOM时设置innerHTML，大型操作会更快，如果他们在操作过程中不更新DOM，那么设置outerHTML是不必要的可怕。只需使用

elem.className=“comment”

这是个人意见，大多数个人意见都会说设置outerHTML是可怕的使用内部html也不应该真正使用，而是创建一个文本节点并将其插入到文章元素中“这只会替换当前引用元素（sic）中的内容（如果使用即“=”）to。“-这是不正确的-它会完全销毁并重新创建元素-因此它会销毁可能已在其上注册的任何事件处理程序等。否您的语句“这将仅替换引用（sic）到的当前元素中的内容（如果使用即“=”）-唯一未复制的位-事实上不正确-它不仅替换内容。它也会破坏容器。我将按我认为合适的方式投票——请随时“报告”你的任何感受。@Fraser不，不是吗

outerHTML

以self为目标，因此它在被替换的过程中也会销毁/替换容器（self）

innerHTML

替换所有子级，并且不销毁容器（self）。如果将事件处理程序添加到在上使用

innerHTML

的元素中，则不会销毁事件处理程序。它将继续工作，因为元素仍然存在。修改innerHTML会导致重新分析内容并重新创建DOM节点，从而丢失您附加的所有处理程序。@Fraser yes！但你不是在谈论内容！你指的是集装箱。当一个元素被替换/销毁时，它当然包括被重新解析的元素和DOM节点！我没有说别的。谢谢@Fraser，我现在正在使用textContent。谢谢，这个答案在问题的上下文中更有意义。