在我们向dom页面写入一些内容时，一般我们都是既使用innerHTML也可以使用appendChild，两者功能似乎没有多大差别。很多朋友一定也对这两个东西感到困惑，今天写代码时我就想到了这个问题，两者真的没有差别吗？
在网上查看了一些文章，然后再通过自己一些测试，得到了如下一些结论。
1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。
可运行下面的代码测试：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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">
script>
body>
html>
2、如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement("a").appendChild(document.getElementById("b"))，执行后，b元素会先被移除，然后再添加到a中。
3、通过appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。
4、在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。
因此在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。
阅读(204) | 评论(0) | 转发(0) |
