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 确实是一个 haxy 快捷方式)但第一个肯定更可靠。也就是说，它容易受到 XSS 注入(inject)攻击。

为了完全正确，你会这样做:

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