zoukankan      html  css  js  c++  java
  • 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" onclick="innerTest()" value="testInnerHTML">
    <div id="test2"></div><br>
    <input type="button" onclick="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>
    输出结果:

     

  • 相关阅读:
    SqlHelper处理类
    你必须知道的ADO.NET(五) 细说数据库连接池
    你必须知道的ADO.NET(三) 连接字符串,你小觑了吗?
    从零开始学习ASP.NET MVC 入门
    ASP.NET MVC3 系列教程 目录
    .NET获取英文月份缩写名(可获取其他国家)
    你必须知道的ADO.NET(二)了解.NET数据提供程序
    良好的C#编程习惯
    你必须知道的ADO.NET(一) 初识ADO.NET
    mvc中使用一个action对多个不同名字段做remote验证
  • 原文地址:https://www.cnblogs.com/jxldjsn/p/10906175.html
Copyright © 2011-2022 走看看