HTML中appendChild和innerHTML的区别

最新推荐文章于 2023-06-28 12:42:04 发布
最新推荐文章于 2023-06-28 12:42:04 发布
阅读量1k 收藏
点赞数
分类专栏： web

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.getElementByIdx("test1");
    for(var i=0;i<500;i++){
      b.innerHTML+=a;
    }
 t2 = (new Date()).getTime();
    alert(t2-t1);
  }

  function appendTest(){
    var t1=(new Date()).getTime();
    var b=document.getElementByIdx("test2");
    for(var i=0;i<500;i++){
      var a=document.createElement("b");
      a.appendChild(document.createTextNode("xxxxxxxx"));
      b.appendChild(a);
    }
 t2 = (new Date()).getTime();
    alert(t2-t1);
  }
  //-->
  </script>
</body>
</html>


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

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

5.IE6-9中innerHtml部分元素只读：The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

6.用appendChild加入<script>会被执行，innerhtml不会。


http://blog.sina.com.cn/s/blog_3cdfaea2010085q1.html

http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx



iamstillzhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript appendChild,innerHTML,join性能比较代码
12-10
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...appendChild,innerHTML,join</title> [removed]<!– //使用appendChild()方法添加span标签 function AppendD
appendChild和innerHTML的小区别
qq_40931054的博客
06-08 641
appendChild接收的类型是一个对象， innerHTML接收的是一个字符串。 一般在js里，拼接html标签时，使用字符串比如：var html+='<div></div>'，用innerHTML=html来接收值 如果是创建了一个div标签对象，var div= createElement('div')，用appendChild(div)把标签放进去。 如果用innerHTML=div接收一个创建的对象，会出现显示不正常变为一个字符串（[object HTMLDivElem
JavaScript之append、appendChild、innerText、innerHTML与textConten的区别、getTime、createElement、createTextNode
最新发布
“代码农”微信公众号
06-28 2480
JavaScript之append、appendChild、innerText、innerHTML与textConten的区别、getTime、createElement、createTextNode
HTML DOM appendChild() 方法
MichaelAn的博客
02-13 137
HTML DOM appendChild() 方法 实例 添加列表项: document.getElementById("myList").appendChild(newListItem); 定义和用法 appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 **提示：**如果文档树中已经存在了 ...
JS innerHTML appendChild append
豫迷糊的码上生活
11-21 425
appendChild() 只能传一个节点，且不直接支持传字符串【需要 appendChild(document.createTextElement(‘字符串’))代替】，返回追加的 Node 节点； 若 appendChild() 的参数是页面存在的一个元素，则执行后原来的元素会被移除； 例如：document.getElement(“a”).appendChild(document.getElementByIdx(“b”))，执行后，b 元素会先被移除，然后再添加到 a 中。 innerHTML 添加的
HTML5的child,HTML中appendChild和innerHTML的区别
weixin_39845461的博客
06-18 418
1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。可运行下面的代码测试：/p>1.0 Transitional//EN""http://www.w3...
innerHTML应用
09-28
blank的blog：http://www.planabc.net/innerHTML 属性的使用非常流行，因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但...
js innerHTML 的一些问题的解决方法
10-30
innerHTML 属性的使用非常流行，因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很显然，使用 innerHTML 修改 DOM tree ...
Dom在ajax技术中的作用说明
12-10
来向html中添加你想要显示的内容．例如：getElementById也或是getElementsByTagName查找元素 innerHTML显示内容?还是appendChild添加元素?当然创建一个不存在的元素也是可以的createElement可以轻松实现． 如果你想...
innerHTML问题汇总以及和appendChild的区别
weixin_46050814的博客
02-23 387
这两天写到前端代码时遇到*innerHTML*使用的不少坑，以下是我总结的坑以及对应的解决方案(希望各位童鞋能及时看到这章并解决自己的问题，不要像我一样又掉了几十根秀发…) 问题论述将以ul和li为例介绍，方便各位理解。 <ul id="uls"> <li> 我是li </li> </ul>/*输出：我是li*/ 1.追加新的li到u...
后端返回html字符串给前端显示，使用appendchild处理
孜然卷的博客
10-27 2760
【代码】使用appendchild处理 后端返回html字符串给前端显示。
html里面append一段代码,HTML DOM appendChild()用法及代码示例
weixin_28843191的博客
06-05 1091
appendChild()方法用于创建文本节点作为该节点的最后一个子节点。此方法还用于将一个元素从一个元素移动到另一个元素。它用于创建带有一些文本的新元素，然后首先将文本创建为文本节点，然后将其附加到元素，然后将元素附加到文档。用法:node.appendChild( node )参数：该方法接受强制性的单参数节点，用于指定需要附加的节点对象。范例1：DOM appendChild() Metho...
append()、appendChild() 和 innerHTML 的区别
热门推荐
QLiuQ
04-08 4万+
概念和区别：append() 可以同时传入多个节点或字符串，没有返回值；据说 append 还是试用期的方法，有兼容问题，（但我用了暂时火狐，谷歌，iE都能使用）。https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/appendappendChild() 只能传一个节点，且不直接支持传字符串【需要 appendChild(docu...
html添加子节点方法,HTML DOM appendChild() 方法
weixin_31115971的博客
06-11 3278
HTML DOM appendChild() 方法appendChild()方法的作用是：在指定父节点的子节点列表的末尾添加一个节点。如果给定的子节点是文档中现有节点的引用，appendChild()将它从当前位置移动到新位置(参见下面的“更多示例”)。使用insertBefore()方法可在指定的现有子节点之前插入新的子节点。语法：node.appendChild(node)示例varnewE...
html appendchild()
dkwokaonima的博客
09-18 581
appendchild()方法是使用範例 var node = document.createElement("LI"); // Create a <li> node var textnode = document.createTextNode("Water"); // Create a text node node.appendChil...
html DOM元素
m0_64567550的博客
01-16 530
元素的添加与移除的两种方法 （1）创建新的HTML元素（节点）-appendchild（）方法，将新元素添加到尾部 步骤：五步走 创建已存在的元素变量（创建<p>元素） var para=document.creteElement("p"); 为<p>创建一个新的文本节点 var node = document.createTextNode("这是一个新的段 落。"); 将文本节点添加到<p>元素中 para....
HTML之appendChild
weixin_33887443的博客
12-29 383
appendChild方法可以向html网页或xml文档中添加一个标签或元素，也可以向已存在的标签内添加一个子元素．在向某个元素添加子元素时，你可以新创建一个元素，或者把页面其他的元素追加到该元素．比如你可以为body添加一个div,或者为ul添加一个li.appendChild方法必须指定一个参数．否则会出错，该参数是你希望添加的html标签，或xml节点元素 <b...
JS 之 appendChild 与 innerHTML
Rand Tsui
07-27 3028
问题：手机滑动分页，每次向下滑到低，就会请求数据并增加 n 个 item ，至于这个 item是什么，item 就是一类相似的 元素，它们有共同的父元素，那么，我要如何添加这几个item？ 方式有两种，第一种很简单，修改父元素的innerHTML，原来的加上新的。 第二种，用appendChild方式，有几个加几个。 以上两种方法比较 第一种方式会删除父元素里面内容，然后重新写入所有ite
在Html中循环输出表格和数据
05-26
你可以使用 HTML 的表格元素和 JavaScript 的循环语句来动态生成表格和数据。 首先，你需要在 HTML 中创建一个空的表格元素，例如： ```html 姓名 年龄 性别 ``` 接下来，在 JavaScript 中定义...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值