javascript - js裡用append()和appendChild有什麼差別?
phpcn_u1582
phpcn_u1582 2017-05-19 10:16:34
0
4
745

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_u1582
phpcn_u1582

全部回覆(4)
曾经蜡笔没有小新

這是node節點上的方法,不過瀏覽器相容有問題,盡量不要用

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

ParentNode.append 方法在 ParentNode的最後一個子節點之後插入一組 Node 物件或 DOMString 物件。
被插入的 DOMString 物件等價為 Text 節點。

phpcn_u1582

parentNode.append()是還在試用期的方法,有相容問題。是parendNode節點中最後一個子節點後插入新Node或DOMString(字串,插入後為Text節點).

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

打完字提交發現上面有了正解 哈哈

某草草

append和appendChild相同的作用,只是一個是jq的寫法,一個js原生的寫法僅次於而已

曾经蜡笔没有小新

aqiList 是一個數組,append是原生js的陣列方法之一。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板