recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Quelle est la différence entre l'utilisation de append() et appendChild dans JS?

Append devrait être une méthode dans jq. Pourquoi puis-je obtenir le même effet que appendChild lorsque j'utilise js sans introduire 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_u15822772 Il y a quelques jours752

répondre à tous(4)je répondrai

  • 曾经蜡笔没有小新

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

    Il s'agit d'une méthode sur le nœud node, mais il y a des problèmes de compatibilité avec le navigateur, alors essayez de ne pas l'utiliser

    MDN a de la documentation
    https://developer.mozilla.org...

    La méthode ParentNode.append insère un ensemble d'objets Node ou d'objets DOMString après le dernier nœud enfant de ParentNode.
    L'objet DOMString inséré est équivalent à un nœud Text.

    répondre
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:18:34

    parentNode.append() est toujours en période d'essai et présente des problèmes de compatibilité. Il s'agit d'insérer un nouveau Node ou DOMString (chaîne, après insertion, ce sera un nœud Texte) après le dernier nœud enfant dans le nœud parendNode.DOMString（字符串，插入后为Text节点）.

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

    La différence avec parentNode.appendChild() est :
    parentNode.append() peut transmettre plusieurs nœuds ou chaînes en même temps, et il n'y a pas de retour value;
    Et parentNode.appendChild() ne peut transmettre qu'un seul nœud et ne prend pas directement en charge le passage de chaînes (nécessite parentNode.appendChild(document.createTextElement('string'))< /code> à la place), renvoie le nœud Node ajouté

    Après avoir tapé et soumis, j'ai trouvé la bonne réponse ci-dessus haha🎜

    répondre
    0
  • 某草草

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

    Append et appendChild ont la même fonction, mais l'un est écrit en jq et l'autre est écrit de manière native js

    répondre
    0
  • 曾经蜡笔没有小新

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

    aqiList est un tableau, et append est l'une des méthodes de tableau de js natif.

    répondre
    0
  • Annulerrépondre