TextNode或innerHTML

时间:2013-10-25 10:02:10

标签: javascript html

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

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

问题是:

  • 两种解决方案之间的区别是什么?
  • 我应该使用哪一个?还有一个比另一个好吗?

1 个答案:

答案 0 :(得分:24)

第一个将删除目标元素中可能存在的任何HTML元素。第二个只有在第一个子节点是文本节点时才会起作用(常见的错误是尝试在空元素上使用它)。

第二个是“更正确”(innerHTML实际上是一个haxy快捷方式),但第一个肯定更可靠。也就是说,它很容易受到XSS注射。

完全正确,你会这样做:

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