概念和区别：
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. linux系统编程之进程(四)

    今天继续研究进程相关的东东,话不多说,进入正题: SIGCHLD: 关于它,之前章节的学习中已经用到了,具体可以参考博文:http://www.cnblogs.com/webor2006/p/3500 ...

  2. 0030redis主从复制以及哨兵模式的搭建

    ------------------------------redis主从备份以及哨兵模式------------------------------------------------------- ...

  3. 2019-2020-1 20199301《Linux内核原理与分析》第四周作业

    Week4 MenuOS的构造 一.上周复习 计算机的三大法宝: 存储程序计算机: 函数调用堆栈: 中断. 操作系统的两把宝剑: 中断上下文-保存现场和恢复现场 进程上下文 二.Linux内核源代码简 ...

  4. K8s中的多容器Pod和Pod内容器间通信

    容器(Container)常被用来解决比如微服务的单个问题,但在实际场景中,问题的解决往往需要多容器方案.本文会讨论将多个容器整合进单个Kubernetes Pod 中,以及Pod中的容器之间是如何通 ...

  5. Codeforces Round #609 (Div. 2) 【A,B,C】

    题意:给一个n<=1e7,找两个合数a和b使得a-b的差为n. 构造a=3n,b=2n,必含有公因子n,只有当n是1的时候是特例. #include<bits/stdc++.h> u ...

  6. Postgresql 进程和内存结构

    在本章中,总结了PostgreSQL中的流程体系结构和内存体系结构,以帮助阅读后续章节.如果您已经熟悉它们,可以跳过本章 1.进程结构 Postgresql 是一个C/S架构的关系型数据库,由多个后台 ...

  7. (尚009)Vue列表渲染

    变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...

  8. 1-STM32物联网开发WIFI+GPRS(Wi-Fi入门篇)_简介

    这期的教程为公开教程将用这块开发板学习WIFI(SDK) 实现哪些功能呢!无非就是那写网络功能...但是涉及的挺多 最近一直在忙方案篇的内容,所以公开版的例程耽误了,现在开始补上 我准备改变一下提供资 ...

  9. GDB core命令的使用调试段错误

    #include <stdio.h> void func(){ int *p = NULL; printf("*p:%d\n", *p);//断错误 } int mai ...

  10. StringSequences

    题意: 给出两个长度不超过\(50\)的字符串\(S, T\),每次可以在\(S\)中插入一个字符,把每次操作后的\(S\)写成一个序列,问有多少种不同的序列． 注意到我们可以把\(S\)拆分成一段一 ...