append()、appendChild() 和 innerHTML 的区别

最新推荐文章于 2024-05-16 04:23:10 发布
最新推荐文章于 2024-05-16 04:23:10 发布
阅读量4.6w 收藏 39
点赞数 10
分类专栏： JS 文章标签： innerHTML appendChild append
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30715329/article/details/79851015
版权

概念和区别：

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>

输出结果：




一招鲜@Q
关注
  • 10
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
innerHTML问题汇总以及和appendChild的区别
weixin_46050814的博客
02-23 389
这两天写到前端代码时遇到*innerHTML*使用的不少坑，以下是我总结的坑以及对应的解决方案(希望各位童鞋能及时看到这章并解决自己的问题，不要像我一样又掉了几十根秀发…) 问题论述将以ul和li为例介绍，方便各位理解。 <ul id="uls"> <li> 我是li </li> </ul>/*输出：我是li*/ 1.追加新的li到u...
javascript appendChild,innerHTML,join性能比较代码
12-10
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <title>appendChild,innerHTML,join</title> [removed]<!– //使用appendChild()方法添加span标签 function AppendD
appendChild() 或 insertBefore()使用与区别介绍
12-03
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 下面，举例说明document.createElement()的用法。<div id=”board”></div> 例1： 代码如下: [removed] var board = document.getElementById(“board”); var
Javascript中append和appendChild有什么不同？
m0_65315526的博客
02-03 2358
append可以追加节点和字符串，appendChild只能追加节点； append没有返有返回值，而appendChild会返回当前节点；
Python 列表 append()函数使用详解
最新发布
2401_84538278的博客
05-16 938
学好 Python 不论是就业还是做副业赚钱都不错，但要学会 Python 还是要有一个学习规划。最后大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！
append和appendChild
u011082575的博客
09-25 330
/ 插入节点对象 parent.append(child) // 可以正常使用 parent.appendChild(child) // 可以正常使用 // 插入DOM字符串 parent.append(‘Hello world’) // 可以正常使用 parent.appendChild(‘Hello world’) // 抛出错误。原始地址：https://dev.to/ibn_abubakre/append-vs-appendchild-a4m。// 这将把child元素附加到div元素中。
append、appendTo、appendChild、prepend
Keith_Walker的博客
01-03 766
append、appendTo、appendChild、在父节点中的最后一个子节点后面插入。 append和appendTo区别是append的前面是对象，后面是要插入的节点对象。 比如append     var wrap=document.getElementById('wrap');   wrap.append('111111'); 而appendTo    $('1111
appendChild和innerHTML的小区别
qq_40931054的博客
06-08 663
appendChild接收的类型是一个对象， innerHTML接收的是一个字符串。 一般在js里，拼接html标签时，使用字符串比如：var html+='<div></div>'，用innerHTML=html来接收值 如果是创建了一个div标签对象，var div= createElement('div')，用appendChild(div)把标签放进去。 如果用innerHTML=div接收一个创建的对象，会出现显示不正常变为一个字符串（[object HTMLDivElem
让innerHTML中的script脚本执行起来
01-08
下面介绍怎么样让跑起来。 分析问题 既然只在文档加载中才被解析，那么我就得调用[removed]()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了，... document.body.appendChild(jsIframe); with(window
Juqery Html(),append()等方法的Bug解决方法
09-05
例如，当需要处理大量DOM操作时，考虑使用 `document.createElement()` 和 `element.appendChild()` 方法创建和添加元素，而不是依赖于jQuery的便利方法。 最后，正如描述中所提到的，虽然jQuery是一个强大的库，...
IE6-IE9中tbody的innerHTML不能赋值的解决方法
09-04
2. **使用DOM操作API**：另一种方法是使用`createElement`、`appendChild`等DOM操作API来创建和插入新的`<tr>`元素。这种方法避免了直接操作`innerHTML`，更符合DOM操作的最佳实践。 ```javascript function ...
html动态增加和删除元素
01-18
例如，`$('div').append('新内容</p>')`可以向所有`<div>`元素内添加新的段落。 - 对于删除，`$('element').remove()`会删除匹配的选择器的所有元素。 5. ES6及以上的特性： - 使用模板字符串(``` ` ``)可以使...
js里用append()和appendChild有什么区别？
高先生的猫
06-16 8944
parentNode.append()是还在试用期的方法，有兼容问题。 是在parendNode节点中最后一个子节点后插入新Node或者DOMString（字符串，插入后为Text节点） 与parentNode.appendChild()的区别在于：parentNode.append()可以同时传入多个节点或字符串，没有返回值； 而parentNode.appendChild()只能传一个节点，且不直接支持传字符串 (需要parentNode.appendChild(document.creat...
JavaScript中的appendChild（）方法
热门推荐
每天学习一点点
12-01 8万+
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 实例一： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt
JavaScript之append、appendChild、innerText、innerHTML与textConten的区别、getTime、createElement、createTextNode
06-28 4931
JavaScript之append、appendChild、innerText、innerHTML与textConten的区别、getTime、createElement、createTextNode
Node对象的appendChild和append方法
卡卡的笔录
12-17 8367
这里主要就目前本人了解到的关于appendChild和append方法阐述的一点点理解。这两个方法都是在父节点的末尾添加子节点。 appendChild() var child = parent.appendChild(child) 该方法的参数是一个Node对象 ...
HTML5的child,HTML中appendChild和innerHTML的区别
weixin_39845461的博客
06-18 428
1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。可运行下面的代码测试：/p>1.0 Transitional//EN""http://www.w3...
javascript通过appendChild(dom)方法插入一个dom元素无效
happy81997的博客
07-25 5293
javascript通过appendChild(dom)方法插入一个dom元素： 父dom的ID：thediv 子dom的ID：closeImgContainer insertCloseImage:function(){ var titleDiv=document.getElementById("thediv"); if(titleDiv){ ...
js append追加html后动态添加css样式
05-27
在使用JavaScript的append方法追加HTML后，可以通过以下两种方法动态添加CSS样式： 1. 使用JavaScript创建style元素，并将CSS样式添加到其中，再将style元素追加到head元素中。 示例代码： ```javascript var css = ".dynamic-class {color: red;}"; var style = document.createElement("style"); style.type = "text/css"; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } document.getElementsByTagName("head")[0].appendChild(style); ``` 2. 直接使用JavaScript设置元素的style属性，来修改元素的样式。 示例代码： ```javascript var div = document.createElement("div"); div.innerHTML = "Hello World"; div.style.color = "red"; document.body.appendChild(div); ``` 以上两种方法都可以实现动态添加CSS样式的效果，具体选择哪种方法，可以根据实际情况来决定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值