JavaScript中innerHTML和createTextN

从此踏上了HTML5的学习之路，今天敲代码，用到了createTextNode和innerHTML，发现他们在某些情况起的作用一样，所以就研究了一下他们的区别。innerHTML属于HTML Dom 而createTextNode属于XML Dom，虽然效果类似，都可以把一段内容添加到一个节点中，但是在某种情况下是有区别的，如下两段代码：

var p=document.createElement("p");

p.className="message";

p.innerHTML="<b> I love HTML5 </b>";

document.body.appendChild(p);

* * * * * * * * * * * * * * * * * * * * * * * * * * *

var p=document.createElement("p");

p.className="message";

var textnode=document.createTextNode(＂<b> I love HTML5 </b>＂);

p.appendChild(textnode);

document.body.appendChild(p);

注意：在第一种情况下呈现出的效果是加粗的文本内容

而在第二种情况下呈现出的效果是<b> I love HTML5 </b>原文本。

所以两者的区别在于，innerHTML会将文本中包含的HTML代码实现效果（如你的例子中<b>I love HTML5</b>会被加粗显示）。而createTextNode只是纯粹创造了文本节点，所以返回的效果也就是纯文本内容，不会被浏览器解析。

最后，如果你确定要插入的内容中没有html标签，可以用innerHTML，这样更简洁，但如果不能确定（比如要插入用户输入的内容）建议用createTextNode的方式。

我的文章很简单，不求打赏但求点赞，谢谢。