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的时候 ...
随机推荐
- 抖音热门BGM爬虫下载
下午无聊在某网上刷了会儿抖音,发现有些音乐还是挺好听的,可以用来做手机铃声,于是想办法从某网上把歌曲爬下来 附上代码: #!/usr/bin/env python # -*- coding: utf- ...
- Bias vs. Variance(2)--regularization and bias/variance,如何选择合适的regularization parameter λ(model selection)
Linear regression with regularization 当我们的λ很大时,hθ(x)≍θ0,是一条直线,会出现underfit:当我们的λ很小时(=0时),即相当于没有做regul ...
- [NgRx] NgRx Data Fetching Solution - How to Load Data Only If Needed
We have a reoslver, which everytime we want visit '/courses' route, it will be triggered, then api w ...
- bilibili 高并发实时弹幕系统的实现
高并发实时弹幕是一种互动的体验.对于互动来说,考虑最多的地方就是:高稳定性.高可用性以及低延迟这三个方面. 高稳定性,为了保证互动的实时性,所以要求连接状态稳定: 高可用性,相当于提供一种备用方案,比 ...
- 数组splay ------ luogu P3369 【模板】普通平衡树（Treap/SBT）
二次联通门 : luogu P3369 [模板]普通平衡树(Treap/SBT) #include <cstdio> #define Max 100005 #define Inline _ ...
- 自主设计BootLoader框架笔记一栏
- Angular实战项目（1）
Angular 打造企业级协作平台 [外链图片转存失败(img-J0HrPiEG-1563902660799)(https://upload-images.jianshu.io/upload_imag ...
- 发现Mathematica中求逆出错
发现Mathematica中应用Inverse求逆时出错.
- P5025 [SNOI2017]炸弹
原题链接 https://www.luogu.org/problem/P5025 闲话时刻: 第一道 AC 的黑题,虽然众人皆说水... 其实思路不是很难,代码也不是很难打,是一些我们已经学过的东西 ...
- C# 百度API地址坐标互相转换
通过C#代码将地址字符串转为经纬度坐标,或者将经纬度转为具体的地址字符串,在不通外网的项目中是有需求的. 具体步骤: 一.创建BaiduMapHelper,用于定义地址信息和请求. public st ...