国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - What is the difference between using append() and appendChild in js?
phpcn_u1582
phpcn_u1582 2017-05-19 10:16:34
0
4
843

Append should be a method in jq. Why can I achieve the same effect as appendChild when I use js without introducing jq?

<!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中各個城市的數(shù)據(jù)
                將空氣質(zhì)量指數(shù)大于60的城市顯示到aqi-list的列表中
                */
                var aqiList = document.getElementById("aqi-list");
                var aqiArray = [];
                var cnArray = ["一", "二", "三", "四", "五", "六"];
                //大于60的放進(jìn)數(shù)組并排序
                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];
                        });
                    };
                };
                //循環(huán)數(shù)組,創(chuàng)建節(jié)點(diǎn)
                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

reply all(4)
曾經(jīng)蠟筆沒有小新

This is a method on the node node, but there are browser compatibility issues, so try not to use it

MDN has documentation
https://developer.mozilla.org...

ParentNode.append method inserts a set of Node objects or DOMString objects after the last child node of ParentNode.
The inserted DOMString object is equivalent to a Text node.

phpcn_u1582

parentNode.append() is still in the trial period and has compatibility issues. It is to insert a new Node or DOMString (string, after insertion, it will be a Text node) after the last child node in the parendNode node.

is replaced with parentNode.appendChild()的區(qū)別在于:
parentNode.append()可以同時傳入多個節(jié)點(diǎn)或字符串,沒有返回值;
parentNode.appendChild()只能傳一個節(jié)點(diǎn),且不直接支持傳字符串(需要parentNode.appendChild(document.createTextElement('字符串'))), returning the appended Node node

After typing and submitting, I found the correct answer above haha

某草草

append and appendChild have the same function, but one is written in jq, and the other is written in js native way

曾經(jīng)蠟筆沒有小新

aqiList is an array, and append is one of the array methods of native js.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template