javascript - Apakah perbezaan antara menggunakan append() dan appendChild dalam js?
phpcn_u1582
phpcn_u1582 2017-05-19 10:16:34
0
4
746

Append sepatutnya menjadi kaedah dalam jq Mengapa saya boleh mencapai kesan yang sama seperti appendChild apabila saya menggunakan js tanpa memperkenalkan 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_u1582
phpcn_u1582

membalas semua(4)
曾经蜡笔没有小新

Ini ialah kaedah pada nod nod, tetapi terdapat masalah keserasian penyemak imbas, jadi cuba untuk tidak menggunakannya

MDN mempunyai dokumentasi
https://developer.mozilla.org...

Kaedah ParentNode.append memasukkan set objek Nod atau objek DOMString selepas nod anak terakhir ParentNode.
Objek DOMString yang dimasukkan adalah bersamaan dengan nod Teks.

phpcn_u1582

parentNode.append() masih dalam tempoh percubaan dan mempunyai masalah keserasian. Ia adalah untuk memasukkan Nod atau DOMString baharu (rentetan, selepas sisipan, ia akan menjadi nod Teks) selepas nod anak terakhir dalam nod parendNode.DOMString(字符串,插入后为Text节点).

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

Perbezaan daripada parentNode.appendChild() ialah:
parentNode.append() boleh lulus dalam berbilang nod atau rentetan pada masa yang sama, dan tiada pengembalian value;
Dan parentNode.appendChild() hanya boleh melepasi satu nod dan tidak menyokong secara langsung rentetan hantaran (memerlukan parentNode.appendChild(document.createTextElement('string')) sebaliknya), kembalikan nod Node

yang ditambahkan

Selepas menaip dan menghantar, saya jumpa jawapan yang betul di atas haha🎜
某草草

tambah dan tambahChild mempunyai fungsi yang sama, tetapi satu ditulis dalam jq, dan satu lagi ditulis dalam cara asli js

曾经蜡笔没有小新

aqiList ialah tatasusunan, dan tambahkan ialah salah satu kaedah tatasusunan js asli.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan