概念和区别：
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. Storm 安装时 部分supervisor启动成功，并不在web ui上显示

    今天帮公司搭建集群时,发现启动了三个Supervisor 发现只有一个显示在Web UI 上. 于是我就简单地检查了下另外两台没有启动的 storm supervisor的日志, 发现没有报出什么异常 ...

  2. SIGAI机器学习第十八集 线性模型2

    之前讲过SVM,是通过最大化间隔导出的一套方法,现在从另外一个角度来定义SVM,来介绍整个线性SVM的家族. 大纲: 线性支持向量机简介L2正则化L1-loss SVC原问题L2正则化L2-loss ...

  3. NIO原理详解

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/CharJay_Lin/article/d ...

  4. Processing 中自定义旋转的实现

    一.首先是关键概念在 Processing 中希望处理圆周上的点需要 旋转公式:x = 旋转中心 + 旋转半径 x cos(旋转角度);y = 旋转中心 + 旋转半径 x sin(旋转角度): 用这一 ...

  5. java学习笔记（2）注释、public lcass、class、标识符、字面值、变量

    java学习笔记(1)中说过了java的一些基础知识,发展史,特点,编译和运行过程,配置环境变量等,接下来开始介绍java的语法等只是点  关于java源程序中的注释: *什么是注释?注释的作用是什么 ...

  6. Java之ClassLoader基础知识

    ClassLoader基本概念 Java程序并不是一个可执行文件,而是由许多独立的类文件组成的,每一个文件对应一个Java类.这些类文件并非全部装入内存,而是根据程序需要逐渐载入.并且ClassLoa ...

  7. python中string、json、bytes的转换

    json->string str = json.dumps(jsonobj) bytes->string str = str(bytes,‘utf-8’) string->json ...

  8. CF1187F Expected Square Beauty(期望)

    题目 CF1187F Expected Square Beauty 做法 \(B(x)=\sum\limits_{i=1}^n I_i(x),I_i(x)=\begin{cases}1&x_i ...

  9. DM-移除几何上的洞方法二

    ​原视频下载地址:http://yunpan.cn/cujkVABuZXc9t  访问密码 ba61

  10. 在Git中如何撤销上一次的commit

    有的时候我们一不小心就git commit -m ‘commit message info’解决办法,很简单,只需执行git reset HEAD~这条命令即可,即能保证你原本的修改还在,也能撤销本次 ...