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的时候 ...
随机推荐
- WPF系列——简单绑定学习
1. 绑定到元素对象.(实际项目中用处不大) 界面上两个关联的控件之间绑定,比如一个TextBlock 的FontSize和一个Slider 的Value绑定: <Slider Name=&qu ...
- SpringCloud组件相关
一.前言 原文地址:https://mp.weixin.qq.com/s/mwn2X0G9UgUDz1sgGgL1mA 认识我的朋友可能都知道我这阵子去实习啦,去的公司说是用SpringCloud(但 ...
- 《BUG创造队》作业8：软件测试与Alpha冲刺（第二天）
项目 内容 这个作业属于哪个课程 2016级软件工程 这个作业的要求在哪里 实验十二 团队作业8:软件测试与ALPHA冲刺 团队名称 BUG创造队 作业学习目标 (1)掌握软件测试基础技术.(2)学习 ...
- vscode——设置自动保存
前言 懒就一个字 步骤 打开设置第一项就是,选择焦点改变自动保存即可
- 远程连接Linux mysql报错：Access denied for user ‘root’@‘localhost’(using password: YES)的解决方法
在新安装好的Centos7上刚安装好mysql,准备进去看看,但是登陆的时候,发现报错啦: ERROR 1045 (28000): Access denied for user 'root'@'loc ...
- pycharm flask debug调试接口
pycharm中对某接口调试,使用print打印日志太麻烦,可以通过debug模式来调试 一.首先开启flask的debug开关 编辑configurations 勾选FLASK_DEBUG选项 已d ...
- Fiddler拦截请求
bpu (breakpoint url ) Create a request breakpoint for URIs containing the specified string. Setting ...
- mybatis之关联关系映射
Mybatis关联关系映射 1.一对多 首先先用逆向生成工具生成t_hibernate_order.t_hibernate_order_item 这两张表对应的model与mapper OrderVo ...
- 常见的meta标签属性
meta标签是网页元标签.可以定义一些网站的功能. 1. name属性 name属性的通用格式如下: <meta name="xxx" content="xxxx, ...
- 2019/7/18 --1.<%@ include file=""%>与<jsp:include page=""/>两种方式的作用
一.前言 身为一名coder有太多太多的知识点要去学,太多太多的东西要去记.往往一些小细节也就难免疏忽,但悲催的是多数困恼你的bug就是因为这些微不足道的知识点.我们又不是机器人,怎么可能什么都记得了 ...