在我们向dom页面写入一些内容时，一般我们都是既使用innerHTML也可以使用appendChild，两者功能似乎没有多大差别。很多朋友一定也对这两个东西感到困惑，今天写代码时我就想到了这个问题，两者真的没有差别吗？
在网上查看了一些文章，然后再通过自己一些测试，得到了如下一些结论。
1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。
可运行下面的代码测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="test1"></div>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div>
<input type="button" onclick="appendTest()" value="testAppendChild">
<script type="text/javascript">
<!--
function innerTest(){
var t1=(new Date()).getTime();
var a="<b>xxxxxxxx</b>";
var b=document.getElementById("test1");
for(var i=0;i<500;i++){
b.innerHTML+=a;
}
alert((new Date()).getTime()-t1);
}
function appendTest(){
var t1=(new Date()).getTime();
var b=document.getElementById("test2");
for(var i=0;i<500;i++){
var a=document.createElement("b");
a.appendChild(document.createTextNode("xxxxxxxx"));
b.appendChild(a);
}
alert((new Date()).getTime()-t1);
}
//-->
</script>
</body>
</html>
2、如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement("a").appendChild(document.getElementById("b"))，执行后，b元素会先被移除，然后再添加到a中。
3、通过appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。
4、在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。
因此在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。