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的时候 ...
随机推荐
- IO多路复用的作用？
I/O多路复用实际上就是用select, poll, epoll监听多个io对象,当io对象有变化(有数据)的时候就通知用户进程.好处就是单个进程可以处理多个socket.当然具体区别我们后面再讨论, ...
- luoguP3768简单的数学题
大佬们绕道吧(或跳到错误&启发后下一根横线后) 这道题吧正解是莫比乌斯反演吧,但本人有一种独创玄妙的想法去偏分 这道题是让我们求这个对吧 \((\sum_{i=1}^n\sum_{j=1}^n ...
- 如何更好的使用js？
JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.D ...
- codepush安装
https://github.com/lisong/code-push-server/blob/master/docs/README.md =====> 安装mysql下载mysql yum r ...
- js原型和原型链的问题
<script> //js原型和原型链的概念 functionperson(name){ this.name=name; } person.prototype.age=18; person ...
- Kubernetes 学习22 kubernetes容器资源需求资源限制及HeapSter（翻车章节）
一.概述 1.接下来介绍在k8s上运行pod对象时我们如何去监控我们系统级的资源指标以及业务级别的资源指标.数据如何获取和监控.在此之前先介绍一下Pod对象的资源请求和资源限制.即容器的资源需求和资源 ...
- js大文件分块上传断点续传demo
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- 边框图片border-image
一.定义: 在内容变化的容器里使用,边框自动填充,由于浏览器的兼容问题,没有广泛使用 border-image属性是速记属性用于设置 border-image-source, border-image ...
- PHP操作数据库（以MySQL为例）
一.开启扩展配置: 在php.ini的extension板块中增加一行extension=php_mysqli.dll 重启PHP,在phpinfo查看 <?php echo phpinfo() ...
- 系统字体放大导致rem布局错乱,解决方案,已通过测试
如果你用rem没遇到过坑,那只能说明你 too young too simple; (function (doc, win) { var resizeEvt = 'orientationchange' ...