有关appendChild和innerHTML（转

最新推荐文章于 2023-06-28 12:42:04 发布
最新推荐文章于 2023-06-28 12:42:04 发布
阅读量138 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/crabzzz/archive/2012/07/25/2609004.html
版权

     在我们向dom页面写入一些内容时，一般我们都是既使用innerHTML也可以使用appendChild，两者功能似乎没有多大差别。很多朋友一定也对这两个东西感到困惑，今天写代码时我就想到了这个问题，两者真的没有差别吗？


在网上查看了一些文章，然后再通过自己一些测试，得到了如下一些结论。

1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。
可运行下面的代码测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
</head>

<body>
<div id="test1"></div>
<input type="button" οnclick="innerTest()" value="testInnerHTML">
<div id="test2"></div> 
<input type="button" οnclick="appendTest()" value="testAppendChild">

  <script type="text/javascript">
  <!--
  function innerTest(){
    var t1=(new Date()).getTime();
    var a="<b>xxxxxxxx</b>";
    var b=document.getElementById("test1");
    for(var i=0;i<500;i++){
      b.innerHTML+=a;
    }
    alert((new Date()).getTime()-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("xxxxxxxx"));
      b.appendChild(a);
    }
    alert((new Date()).getTime()-t1);
  }
  //-->
  </script>
</body>
</html>

2、如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement("a").appendChild(document.getElementById("b"))，执行后，b元素会先被移除，然后再添加到a中。
3、通过appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。
4、在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。

因此在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。

转载于:https://www.cnblogs.com/crabzzz/archive/2012/07/25/2609004.html

weixin_30297281
关注
请分别使用appedChild（　）方法和innerHTML属性这两种方法在body元素中插入一个按钮：＜input id=“btn“ type=“button“ value=“按钮“/＞。
weixin_45580234的博客
04-21 1081
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload =
append()、appendChild() 和 innerHTML 的区别
热门推荐
QLiuQ
04-08 4万+
概念和区别：append() 可以同时传入多个节点或字符串，没有返回值；据说 append 还是试用期的方法，有兼容问题，（但我用了暂时火狐，谷歌，iE都能使用）。https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/appendappendChild() 只能传一个节点，且不直接支持传字符串【需要 appendChild(docu...
appendChild和innerHTML的小区别
qq_40931054的博客
06-08 686
appendChild接收的类型是一个对象， innerHTML接收的是一个字符串。 一般在js里，拼接html标签时，使用字符串比如：var html+='<div></div>'，用innerHTML=html来接收值 如果是创建了一个div标签对象，var div= createElement('div')，用appendChild(div)把标签放进去。 如果用innerHTML=div接收一个创建的对象，会出现显示不正常变为一个字符串（[object HTMLDivElem
js中append,appendChild及innerHTML的认识
qq_43222297的博客
05-03 6208
本人是新手，在js的学习中遇到了一些问题，查了许多博客，但对新手来说都不友好，特和大家分享一下自己的理解心得。如有错误谢谢指出。 append用法： 可以同时传入多个节点或字符串，没有返回值。 appendchild用法： 只能传一个节点，且不直接支持传字符串。 innerHTML用法： 添加纯字符串，不能获取内部元素的属性。 下面是我打的代码，可以让大家分清它们的用法。 <!DOCTYPE...
HTML5的child,HTML中appendChild和innerHTML的区别
weixin_39845461的博客
06-18 496
1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。可运行下面的代码测试：/p>1.0 Transitional//EN""http://www.w3...
javascript appendChild,innerHTML,join性能比较代码
12-10
这种方式试图平衡`innerHTML`的便利性和`appendChild()`的性能，但由于仍然涉及到`innerHTML`的设置，其性能通常仍不及`appendChild()`。 性能比较： - `appendChild()`通常在性能上优于`innerHTML`，尤其是在处理...
JS innerHTML appendChild append
豫迷糊的码上生活
11-21 458
appendChild() 只能传一个节点，且不直接支持传字符串【需要 appendChild(document.createTextElement(‘字符串’))代替】，返回追加的 Node 节点； 若 appendChild() 的参数是页面存在的一个元素，则执行后原来的元素会被移除； 例如：document.getElement(“a”).appendChild(document.getElementByIdx(“b”))，执行后，b 元素会先被移除，然后再添加到 a 中。 innerHTML 添加的
innerHTML问题汇总以及和appendChild的区别
weixin_46050814的博客
02-23 424
这两天写到前端代码时遇到*innerHTML*使用的不少坑，以下是我总结的坑以及对应的解决方案(希望各位童鞋能及时看到这章并解决自己的问题，不要像我一样又掉了几十根秀发…) 问题论述将以ul和li为例介绍，方便各位理解。 <ul id="uls"> <li> 我是li </li> </ul>/*输出：我是li*/ 1.追加新的li到u...
innerHtml（转）
03-01
标题中的"innerHtml（转）"可能是指HTML DOM（Document Object Model）中的一个属性`innerHTML`，这是一个非常关键的概念，特别是在JavaScript中用于处理HTML元素的内容。`innerHTML`允许我们获取或设置HTML元素内部...
Web前端之操作元素内容的方法、介绍、区别、createTextNode、createElement、appendChild、textConten、innerText、innerHTML、append
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
06-28 6012
Web前端之操作元素内容的方法、介绍、区别、createTextNode、createElement、appendChild、textConten、innerText、innerHTML、append
appendChild,innerHTML,join性能大比拼
ws_hgo的专栏
08-29 3350
  appendChild,innerHTML,join <!-- //使用appendChild()方法添加span标签 function AppendDiv() { var times=parseInt(document.getElementById(tbTimes).value); var oDiv=d
对于比较大的页面innerHTML或appendChild要避免
ang639
04-28 1762
我们经常会通过JS来对页面布局进行调整。然而，对于比较大的部分最好避免调整，比如innerHTML或appendChild进行位置调整。因为在调整的过程中，浏览器会对这些变动的部位进行重新刷新，其HTML比较大时浏览器解析就很慢，然后会导致页面的明显抖动。
关于JavaScript中使用appendChild和innerHTML动态添加一个元素的时间的比较
u010201451的专栏
04-13 1204
关于JavaScript中使用appendChild和innerHTML动态添加一个元素的时间比较
innerHTML和appendChild的性能
weixin_33690367的博客
04-14 411
　　目测innerHTML比appendChild好了3到4倍， 但是界面渲染还是很慢啊；  　 chrome结果 /** *chrome浏览器; * innerHTML appendChild * 1千条的情况下：3MS 11MS ...
javascript中innerHTML和appendChild的比较
代码青春
03-24 947
https://zhidao.baidu.com/question/98239153.html
lastRowHtml = newRow.outerHTML tbody.appendChild(newRow).innerHTML = lastRowHtml
最新发布
10-07
这两行代码的意思是首先获取新行`newRow`的HTML内容（包括标签和所有子节点），然后将其插入到表格的tbody部分。接着，删除刚刚插入的新行，再设置tbody的HTML内容为`lastRowHtml`，也就是之前保存的原最后一个行的HTML。 这样做可能会导致两个问题： 1. `tbody.appendChild(newRow)`这行会直接将新行添加到tbody，而不仅仅是复制其内容。所以，如果你后续想要保留原`lastRow`的内容，只通过innerHTML重置`tbody`可能覆盖掉之前的所有数据，除非`lastRowHtml`就是你期望的新行内容。 2. 删除新行后再设置innerHTML可能导致性能问题，因为每次`innerHTML`都会解析整个字符串生成新的DOM树，频繁操作可能会降低页面的渲染速度。 建议调整代码逻辑，避免不必要的DOM操作，例如，可以在`upinsertRowData`函数结束后，单独处理`lastRow`的更新，使其与表格内容分离。以下是优化后的代码片段： ```javascript function upinsertRowData() { var newRow = document.createElement('tr'); newRow = originalLastRow; // 使用原始的最后一行 // 更新新行的ID和其他属性 ... // 插入新行 tbody.appendChild(newRow); // 保存新行的HTML用于后期可能的复用 var newRowHtml = newRow.outerHTML; // 如果需要保存原lastRow的HTML，这里可以单独处理 // lastRowHtml = lastRow.outerHTML; } // 当不再需要lastRow的HTML时，可以在这里更新tbody if (typeof lastRowHtml !== 'undefined') { tbody.innerHTML = lastRowHtml; } ``` 这样既保证了表格的正常操作，又避免了不必要的DOM刷新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值