javascript - TextNode 或 innerHTML

Question

假设我们有以下元素<p id="abc">Hello World</p>。如果我想修改<p>标签中的内容，我在 javascript 代码中有两种方法：

document.getElementById("abc").innerHTML="good morning";
document.getElementById("abc").firstChild.nodeValue="good morning";

问题是：

• 两种解决方案有哪些区别？
  
• 我应该使用哪一个？有一个比另一个更好吗？

Answer 1

第一个将删除可能在目标元素内的任何 HTML 元素。仅当第一个子节点是文本节点时，第二个才有效（一个常见的错误是尝试在空元素上使用它）。

第二个是“更正确”（innerHTML实际上是一个巧妙的捷径），但第一个肯定更可靠。也就是说，它很容易受到 XSS 注入的攻击。

要完全正确，您可以这样做：

var abc = document.getElementById('abc');
while(abc.firstChild) abc.removeChild(abc.firstChild);
abc.appendChild(document.createTextNode("good morning"));