搜索

首页  >  问答  >  正文

javascript - js里用append()和appendChild有什么区别?

append应该是jq里的方法吧,为什么我用js没有引入jq也可以达到跟appendChild一样的效果?

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>IFE JavaScript Task 01</title>
    </head>

    <body>

        <h3>污染城市列表</h3>
        <ul id="aqi-list">
            <!--   
    <li>第一名:福州(样例),10</li>
      <li>第二名:福州(样例),10</li> -->
        </ul>

        <script type="text/javascript">
            var aqiData = [
                ["北京", 90],
                ["上海", 50],
                ["福州", 10],
                ["广州", 50],
                ["成都", 90],
                ["西安", 100]
            ];

            (function() {

                /*
                在注释下方编写代码
                遍历读取aqiData中各个城市的数据
                将空气质量指数大于60的城市显示到aqi-list的列表中
                */
                var aqiList = document.getElementById("aqi-list");
                var aqiArray = [];
                var cnArray = ["一", "二", "三", "四", "五", "六"];
                //大于60的放进数组并排序
                for(var i = 0; i < aqiData.length; i++) {
                    if(aqiData[i][1] >= 60) {
                        aqiArray.push(aqiData[i]);
                        aqiArray.sort(function(a,b){
                            return b[1]-a[1];
                        });
                    };
                };
                //循环数组,创建节点
                for(var i = 0; i < aqiArray.length; i++) {
                    var newLi = document.createElement("li");
                    newLi.innerHTML = "第" + cnArray[i] + "名:" + aqiArray[i];
                    aqiList.append(newLi);
                };
            })();
        </script>
    </body>

</html>
phpcn_u1582phpcn_u15822772 天前751

全部回复(4)我来回复

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:18:34

    这是个node节点上的方法,不过浏览器兼容有问题,尽量不要用

    MDN有文档
    https://developer.mozilla.org...

    ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。
    被插入的 DOMString 对象等价为 Text 节点。

    回复
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:18:34

    parentNode.append()是还在试用期的方法,有兼容问题。是在parendNode节点中最后一个子节点后插入新Node或者DOMString(字符串,插入后为Text节点).

    parentNode.appendChild()的区别在于:
    parentNode.append()可以同时传入多个节点或字符串,没有返回值;
    parentNode.appendChild()只能传一个节点,且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement('字符串'))代替),返回追加的Node节点

    打完字提交发现上面有了正解 哈哈

    回复
    0
  • 某草草

    某草草2017-05-19 10:18:34

    append和appendChild相同的作用,只是一个是jq的写法,一个js原生的写法仅次而已

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:18:34

    aqiList 是一个数组,append是原生js的数组方法之一。

    回复
    0
  • 取消回复