搜尋

首頁  >  問答  >  主體

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_u15822803 天前774

全部回覆(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
  • 取消回覆