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注射.

要完全正确,你会这样做:

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