JS innerHTML appendChild append

最新推荐文章于 2023-06-28 12:42:04 发布

豫迷糊

最新推荐文章于 2023-06-28 12:42:04 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

分类专栏：网站知识 html js 文章标签： javascript js

本文链接：https://blog.csdn.net/Sncdma/article/details/109904076

本文探讨了JavaScript中appendChild和innerHTML两个方法的区别。appendChild只能添加一个节点，且不支持直接添加字符串，而innerHTML则用于添加纯字符串，不保留内部元素属性。在性能上，innerHTML在创建多个属性和文本时较为便捷，但在包含HTML标记时，appendChild的执行速度更快。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"><

最低0.47元/天解锁文章