概念和区别：
append() 
可以同时传入多个节点或字符串，没有返回值；

据说 append 还是试用期的方法，有兼容问题，（但我用了暂时火狐，谷歌，iE都能使用）。

https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append

appendChild() 
只能传一个节点，且不直接支持传字符串【需要 appendChild(document.createTextElement('字符串'))代替】，返回追加的 Node 节点；

若 appendChild() 的参数是页面存在的一个元素，则执行后原来的元素会被移除；

例如：document.getElement("a").appendChild(document.getElementByIdx("b"))，执行后，b 元素会先被移除，然后再添加到 a 中。

innerHTML
添加的是纯字符串，不能获取内部元素的属性；不同于 appendChild 添加到的是 dom 对象，返回的也是 dom 对象，可以通过 dom 对象访问获取元素的各种属性。

性能
innerHTML 比 appendChild 要方便，特别是创建的节点属性多，同时还包含文本的时候；
但执行速度的比较上，使用 appendChild 比 innerHTML 要快，特别是内容包括 html 标记时，appendChild 明显要快于  innerHTML，这可能是因为 innerHTML 在铺到页面之前还要对内容进行解析才能铺到页面上，当包含 html 标记过多时， innerHTML速度会明显变慢。

案例：

<body>
<div id="test1"></div><br>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div><br>
<input type="button" onclick="appendTest()" value="testAppendChild">

<script type="text/javascript">
function innerTest() {
var t1 = (new Date()).getTime();
var a = "<b>apple</b>";
var b = document.getElementById("test1");
for (var i = 0; i < 500; i++) {
b.innerHTML += a;
}
t2 = (new Date()).getTime();
console.log("testInnerHTML:" + (t2 - 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("apple"));
b.appendChild(a);
}
t2 = (new Date()).getTime();
console.log("testAppendChild:" + (t2 - t1));
}
</script>
</body>
输出结果：

append()、appendChild() 和 innerHTML 的区别的更多相关文章

  1. innerText与innerHTML的区别

    innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...

  2. 静态资源命名的注意点以及document.write与innerHTML的区别

    今天拿出了去年刚开始学前端的那本书来看,发现好多新东西. 使用下划线和混合大小写不利于SEO! document.write与innerHTML的区别 这个问题大概是初学前端的人才会问的吧,业务代码中 ...

  3. append appendChild appendTo区别

    1.append和appendChild的区别 append是jquery文档操作用法 ① append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(c ...

  4. js append()和appendChild()和insertBefore()的区别

    <body> <input type="button" value="删除" id="btn"> <scrip ...

  5. append和innerHTML的区别以及使用方法

    1.append jquery中的append的使用方式:$("#id").append("<a href='#'>test</a>") ...

  6. createTextNode和innerHTML什么区别

    今天写代码,用到createTextNode,发现好像功能和innerHTML是一样的,于是查阅了网上的资料了. 一.createTextNode 例如: var element = document ...

  7. 《JavaScript+DOM编程艺术》的摘要（四）appendChild与insertBefore的区别

    基本知识点: // 1.js里面为什么要添加window.onload=function (){} // 保证html文档都加载完了,才开始运行js代码,以防html文档没有加载完,找不到相应的元素 ...

  8. innerText和innerHTML的区别

    innerhtml用法 innertext用法 以及innerHTML与innertext的区别,看完这个大家以后在实际应用中,就可以选择合适的方法.尽可能的考虑到兼容性. test.innerHTM ...

  9. python list中append()方法和extend()方法区别

    共同点 只能作用于list类型(不能作用于tuple等其他类型) 单参数限制(不支持多参数) 不同点 list.append(object) 向列表中添加一个对象object. 使用append的时候 ...

随机推荐

  1. pyspark AttributeError: 'NoneType' object has no attribute 'setCallSite'

    pyspark: AttributeError: 'NoneType' object has no attribute 'setCallSite' 我草,是pyspark的bug.解决方法: prin ...

  2. 【Python学习】Python3 基本数据类型

    参考学习地址:https://www.runoob.com/python3/python3-data-type.html Python3 基本数据类型 Python 中的变量不需要声明.每个变量在使用 ...

  3. python数据分析之数据分布

    转自链接:https://blog.csdn.net/YEPAO01/article/details/99197487 一.查看数据分布趋势 import pandas as pd import nu ...

  4. C语言实验1—— C中的指针和结构体

    问题 实现一个算法,检测单链表中是否有环,如果有环还要得到环的入口. 分析 判断是否有环:快慢指针法(也叫“龟兔赛跑”),慢指针每次移动一位,快指针每次移动两位,如果有环,他们一定会相遇. 求环的入口 ...

  5. Codeforces Round #604 (Div. 2) A. Beautiful String

    链接: https://codeforces.com/contest/1265/problem/A 题意: A string is called beautiful if no two consecu ...

  6. Vector(同步)和Arraylist(异步)的异同

    //  同步  异步  //1  同步  //2  异步  //未响应 = 假死  占用内存过多  内存无法进行处理  //请求方式:同步    异步  //网页的展现过程中:1 css文件的下载  ...

  7. HEXO的使用

    本文将总结性的介绍如何建立自己的github.io博客,后续会持续补充,进阶.感谢baixin提供的参考文章. 技术选型为github+hexo+idea,首先最简单的阐述下这个东西都干嘛的 1. 技 ...

  8. CF19D Points 平衡树

    题意:支持插入/删除点 $(x,y)$,查询一个点右上方横坐标与之最接近的点坐标. 我们可以对于每一个操作过的横坐标都开一个 $set$,然后再开一个平衡树,维护每个横坐标上最大的纵坐标. 然后查询点 ...

  9. 鼠标经过提高层级案例（margin，相对定位，z-index）

    <body> <ul> <li class="box1">1</li> <li class="box2"& ...

  10. 一张图理解shell内核

    #!/bin/bash name="liu de hua";#name后面=不能有空格 echo "hello word ${name}work $name"; ...