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" οnclick="innerTest()" value="testInnerHTML"><div id="test2"></div><br><input type="button" οnclick="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 的区别相关推荐

Python的list方法append和extend有什么区别？
列表方法append()和之间有什么区别extend()? append:在末尾追加对象. x = [1, 2, 3] x.append([4, 5]) print (x) 给你: [1, 2, 3, ...
append,extend和insert的区别
append,extend与insert的区别 append是在列表后面直接添加你输入的数据,就算是列表或字典,也直接添加进去,比较死板 extend是在列表后面添加数据,如果添加的是列表或字典亦或者 ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
innerText 和 innerHTML的区别
innerText 和 innerHTML的区别 1.innerText不识别html标签,非标准,会自动去除空格和换行 var div = document.querySelector('div') ...
Python 的列表方法 append 和 extend 有什么区别？
问: 这个问题的答案是社区的努力.编辑现有答案以改进这篇文章.它目前不接受新的答案或交互. 列表方法 append() 和 extend() 有什么区别? 答1: huntsbot.com提供全网独家 ...
Javascript:innertext和innerhtml的区别
文章目录前言一.区别二.代码示例 1.代码演示 2.最终效果前言在Javascript中,通过控件对象的innertext和innerhtml属性都可以对控件对象的显示文字进行读取和修改,那 ...
innerText与innerHTML的区别
innerText: innerText可以获取标签间的内容,如果标签间只有文本的话,则是直接获取.如果标签间还有嵌套标签的话,则会将嵌套标签忽略掉获取文本. innerText在给标签设置内容的时候 ...
【python教程】append()与extend()方法的区别教程
append()方法是将后一组列表当成一个对象,整体加入前一组列表中 list_A = ['h', 'e','l','l','o'] list_B = ['w','o','r','l','d']lis ...
js中写文档write和innerHTML的区别
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open.每次写完关闭之后重新调用该函数,会导致页面被重写. innerHTML ...