HTML中appendChild和innerHTML的区别

最新推荐文章于 2023-06-28 12:42:04 发布

转载最新推荐文章于 2023-06-28 12:42:04 发布 · 1.1k 阅读

web 专栏收录该内容

2 篇文章

订阅专栏

本文对比了innerHTML与appendChild两种DOM操作方法的性能表现，通过实验发现，在大量数据更新时，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>

  function appendTest(){
    var t1=(new Date()).getTime();
    var b=document.getElementByIdx("test2");
    for(var i=0;i<500;i++){
      var a=document.createElement("b");
      a.appendChild(document.createTextNode("xxxxxxxx"));
      b.appendChild(a);
    }
t2 = (new Date()).getTime();
    alert(t2-t1);
  }
  //-->
  </script>
</body>
</html>

2、如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement("a").appendChild(document.getElementByIdx("b"))，执行后，b元素会先被移除，然后再添加到a中。
3、通过appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。
4、在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。

因此在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。

5.IE6-9中innerHtml部分元素只读：The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.