javascript - Was ist der Unterschied zwischen der Verwendung von append() und appendChild in js?
phpcn_u1582
phpcn_u1582 2017-05-19 10:16:34
0
4
736

Append sollte eine Methode in jq sein. Warum kann ich den gleichen Effekt wie appendChild erzielen, wenn ich js verwende, ohne jq einzuführen?

<!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

Antworte allen(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的数组方法之一。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage