search

Home  >  Q&A  >  body text

javascript - What is the difference between using append() and appendChild in js?

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中各个城市的数据
                将空气质量指数大于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_u15822739 days ago730

reply all(4)I'll reply

  • 曾经蜡笔没有小新

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

    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.

    reply
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:18:34

    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()的区别在于:
    parentNode.append()可以同时传入多个节点或字符串,没有返回值;
    parentNode.appendChild()只能传一个节点,且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement('字符串'))), returning the appended Node node

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

    reply
    0
  • 某草草

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

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

    reply
    0
  • 曾经蜡笔没有小新

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

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

    reply
    0
  • Cancelreply