append()、appendChild() 和 innerHTML 的区别
概念和区别：
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 的区别的更多相关文章
- innerText与innerHTML的区别
innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...
- 静态资源命名的注意点以及document.write与innerHTML的区别
今天拿出了去年刚开始学前端的那本书来看,发现好多新东西. 使用下划线和混合大小写不利于SEO! document.write与innerHTML的区别 这个问题大概是初学前端的人才会问的吧,业务代码中 ...
- append appendChild appendTo区别
1.append和appendChild的区别 append是jquery文档操作用法 ① append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(c ...
- js append()和appendChild()和insertBefore()的区别
<body> <input type="button" value="删除" id="btn"> <scrip ...
- append和innerHTML的区别以及使用方法
1.append jquery中的append的使用方式:$("#id").append("<a href='#'>test</a>") ...
- createTextNode和innerHTML什么区别
今天写代码,用到createTextNode,发现好像功能和innerHTML是一样的,于是查阅了网上的资料了. 一.createTextNode 例如: var element = document ...
- 《JavaScript+DOM编程艺术》的摘要（四）appendChild与insertBefore的区别
基本知识点: // 1.js里面为什么要添加window.onload=function (){} // 保证html文档都加载完了,才开始运行js代码,以防html文档没有加载完,找不到相应的元素 ...
- innerText和innerHTML的区别
innerhtml用法 innertext用法 以及innerHTML与innertext的区别,看完这个大家以后在实际应用中,就可以选择合适的方法.尽可能的考虑到兼容性. test.innerHTM ...
- python list中append()方法和extend()方法区别
共同点 只能作用于list类型(不能作用于tuple等其他类型) 单参数限制(不支持多参数) 不同点 list.append(object) 向列表中添加一个对象object. 使用append的时候 ...
随机推荐
- LG5487 【模板】线性递推+BM算法
[模板]线性递推+BM算法 给出一个数列 \(P\) 从 \(0\) 开始的前 \(n\) 项,求序列 \(P\) 在\(\bmod~998244353\) 下的最短线性递推式,并在 \(\bmod~ ...
- Intellij IDEA – How to build project automatically
By default, Intellij IDEA doesn’t compile classes automatically. But, you can enable the auto compil ...
- sleep() 和 wait() 区别是什么?
sleep() 和 wait() 区别是什么? 1.每个对象都有一个锁来控制同步访问,Synchronized关键字可以和对象的锁交互,来实现同步方法或同步块.sleep()方法正在执行的线程主动让出 ...
- Mac上django 报错 [Errno 13] Permission denied: '/static'
将setting文件中的 改成:
- eclipse 安装反编译工具
jd-gui是我最喜欢使用的java反编译工具.它是一款用c++开发的轻量级的java反编译工具,无须安装即可以使用,你甚至都不需要安装jre环境就可以实现反编译:支持最新的jdk,目前是jdk 1. ...
- LINUX系统的常用知识
常用的命令: man config 查看linux里面所有命令的详细描述 man pwd 按回车是一行一行的走,按空格是一页一页的走,按q键是退出的意思 mkdir test 创建文件夹p ...
- C#格式化字符串使用
1 前言 如果你熟悉Microsoft Foundation Classes(MFC)的CString,Windows Template Library(WTL)的CString或者Standard ...
- IDEA快速实现接口快捷方式
IDEA快速实现接口快捷方式 ALT +INSERT
- matlab 万能实用的非线性曲线拟合方法
——转载网络 在科学计算和工程应用中,经常会遇到需要拟合一系列的离散数据,最近找了很多相关的文章方法,在这里进行总结一下其中最完整.几乎能解决所有离散参数非线性拟合的方法 第一步:得到散点数据 根据你 ...
- 洛谷P1650赛马与codevs 2181 田忌赛马
洛谷P1650 赛马 题目描述 我国历史上有个著名的故事: 那是在2300年以前.齐国的大将军田忌喜欢赛马.他经常和齐王赛马.他和齐王都有三匹马:常规马,上级马,超级马.一共赛三局,每局的胜者可以从负 ...