recherche

Maison >interface Web >js tutoriel >Comment ajouter des nœuds enfants dans jquery

Comment ajouter des nœuds enfants dans jquery

青灯夜游
青灯夜游original
2021-11-16 14:49:114650parcourir

Méthodes ajoutées : 1. Utilisez l'instruction "parent node.append(child node)" ; 2. Utilisez l'instruction "parent node.prepend(child node)" ; 3. Utilisez l'instruction "child node.appendTo(parent node)" ; " ; 4. Utilisez l'instruction "$(child node).prependTo(parent node)".

Comment ajouter des nœuds enfants dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

Dans jquery, si vous souhaitez ajouter des nœuds enfants au nœud parent, il existe de nombreuses méthodes :

  • append() : Insérez du contenu jusqu'à la "fin" à l'intérieur de l'élément sélectionné.

  • appendTo() : Insérer du contenu "à la fin" à l'intérieur de l'élément sélectionné.

  • prepend() : Insère du contenu au "début" à l'intérieur de l'élément sélectionné.

  • prependTo() : Insérer du contenu au "début" à l'intérieur de l'élément sélectionné.

Exemple : 

  <script>
    $(function () {
      //1.append();
      //父节点.append(子节点); //作为最后一个子元素添加.
      $(&#39;#btnAppend&#39;).click(function () {
        //1.1 新创建一个li标签,追加到ul1中
        // var $newLi = $(&#39;<li>我是新创建的li标签</li>&#39;);
        // $(&#39;#ul1&#39;).append($newLi);

        //1.2 获取ul1中的某一个li标签,追加到ul1中.
        //剪切过来作为最后一个子元素添加.
        // var $li3 = $(&#39;#li3&#39;);
        // $(&#39;#ul1&#39;).append($li3);

        //1.3 获取ul2中的某一个li标签,追加到ul1中.
        //剪切过来作为最后一个子元素添加.
        var $li32 = $(&#39;#li32&#39;);
        $(&#39;#ul1&#39;).append($li32);
      });


      //2.prepend()
      //父节点.prepend(子节点); //作为第一个子元素添加.
      $(&#39;#btnPrepend&#39;).click(function () {
        //2.1 新创建一个li标签,追加到ul1中
        // var $newLi = $(&#39;<li>我是新创建的li标签</li>&#39;);
        // $(&#39;#ul1&#39;).prepend($newLi);

        //2.2 获取ul1中的某一个li标签,追加到ul1中.
        //剪切过来作为最后一个子元素添加.
        // var $li3 = $(&#39;#li3&#39;);
        // $(&#39;#ul1&#39;).prepend($li3);

        //2.3 获取ul2中的某一个li标签,追加到ul1中.
        //剪切过来作为最后一个子元素添加.
         var $li32 = $(&#39;#li32&#39;);
         $(&#39;#ul1&#39;).prepend($li32);
      });


      //3.appendTo();
      //子节点.appendTo(父节点); //作为最后一个子元素添加.
      $(&#39;#btnAppendTo&#39;).click(function () {
        //1.1 新创建一个li标签,追加到ul1中
        var $newLi = $(&#39;<li>我是新创建的li标签</li>&#39;);
        $newLi.appendTo($(&#39;#ul1&#39;));
      });
      
      //4.prependTo()
      //子节点.prependTo(父节点); //作为第一个子元素添加.
      $(&#39;#btnPrependTo&#39;).click(function () {
        //1.1 新创建一个li标签,追加到ul1中
        var $newLi = $(&#39;<li>我是新创建的li标签</li>&#39;);
        $newLi.prependTo($(&#39;#ul1&#39;));
      });


    });
  </script>
  <body>
<input type="button" value="append" id="btnAppend"/>
<input type="button" value="prepend" id="btnPrepend"/>
<input type="button" value="appendTo" id="btnAppendTo"/>
<input type="button" value="prependTo" id="btnPrependTo"/>
<ul id="ul1">
  <li>我是第1个li标签</li>
  <li>我是第2个li标签</li>
  <li id="li3">我是第3个li标签</li>
  <li>我是第4个li标签</li>
  <li>我是第5个li标签</li>
</ul>

<ul id="ul2">
  <li>我是第1个li标签2</li>
  <li>我是第2个li标签2</li>
  <li id="li32">我是第3个li标签2</li>
  <li>我是第4个li标签2</li>
  <li>我是第5个li标签2</li>
</ul>
</body>

Comment ajouter des nœuds enfants dans jquery

Recommandation de didacticiel connexe : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment cacher le tr de la table dans jqueryArticle suivant：Comment cacher le tr de la table dans jquery

Articles Liés

Voir plus