cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Apakah perbezaan antara menggunakan append() dan appendChild dalam js?

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_u1582phpcn_u15822739 hari yang lalu725

membalas semua(4)saya akan balas

  • 曾经蜡笔没有小新

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

    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.

    balas
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:18:34

    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'))< /code> sebaliknya), kembalikan nod Node

    yang ditambahkan

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

    balas
    0
  • 某草草

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

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

    balas
    0
  • 曾经蜡笔没有小新

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

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

    balas
    0
  • Batalbalas