溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery中如何增加子節(jié)點(diǎn)

發(fā)布時(shí)間：2021-11-16 15:21:52 來源：億速云 閱讀：555 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“jquery中如何增加子節(jié)點(diǎn)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“jquery中如何增加子節(jié)點(diǎn)”吧！

增加方法：1、使用“父節(jié)點(diǎn).append(子節(jié)點(diǎn))”語句；2、使用“父節(jié)點(diǎn).prepend(子節(jié)點(diǎn))”語句；3、使用“子節(jié)點(diǎn).appendTo(父節(jié)點(diǎn))”語句；4、使用“$(子節(jié)點(diǎn)).prependTo(父節(jié)點(diǎn))”語句。

jquery中如何增加子節(jié)點(diǎn)

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

在jquery中，想要在父節(jié)點(diǎn)中增加子節(jié)點(diǎn)，有多種方法：

  • append()：向所選元素內(nèi)部的“末尾處”插入內(nèi)容。

  • appendTo()：向所選元素內(nèi)部的“末尾處”插入內(nèi)容。

  • prepend()：向所選元素內(nèi)部的“開始處”插入內(nèi)容。

  • prependTo()：向所選元素內(nèi)部的“開始處”插入內(nèi)容。

示例：

  <script>
    $(function () {
      //1.append();
      //父節(jié)點(diǎn).append(子節(jié)點(diǎn)); //作為最后一個(gè)子元素添加.
      $('#btnAppend').click(function () {
        //1.1 新創(chuàng)建一個(gè)li標(biāo)簽,追加到ul1中
        // var $newLi = $('<li>我是新創(chuàng)建的li標(biāo)簽</li>');
        // $('#ul1').append($newLi);

        //1.2 獲取ul1中的某一個(gè)li標(biāo)簽,追加到ul1中.
        //剪切過來作為最后一個(gè)子元素添加.
        // var $li3 = $('#li3');
        // $('#ul1').append($li3);

        //1.3 獲取ul2中的某一個(gè)li標(biāo)簽,追加到ul1中.
        //剪切過來作為最后一個(gè)子元素添加.
        var $li32 = $('#li32');
        $('#ul1').append($li32);
      });


      //2.prepend()
      //父節(jié)點(diǎn).prepend(子節(jié)點(diǎn)); //作為第一個(gè)子元素添加.
      $('#btnPrepend').click(function () {
        //2.1 新創(chuàng)建一個(gè)li標(biāo)簽,追加到ul1中
        // var $newLi = $('<li>我是新創(chuàng)建的li標(biāo)簽</li>');
        // $('#ul1').prepend($newLi);

        //2.2 獲取ul1中的某一個(gè)li標(biāo)簽,追加到ul1中.
        //剪切過來作為最后一個(gè)子元素添加.
        // var $li3 = $('#li3');
        // $('#ul1').prepend($li3);

        //2.3 獲取ul2中的某一個(gè)li標(biāo)簽,追加到ul1中.
        //剪切過來作為最后一個(gè)子元素添加.
         var $li32 = $('#li32');
         $('#ul1').prepend($li32);
      });


      //3.appendTo();
      //子節(jié)點(diǎn).appendTo(父節(jié)點(diǎn)); //作為最后一個(gè)子元素添加.
      $('#btnAppendTo').click(function () {
        //1.1 新創(chuàng)建一個(gè)li標(biāo)簽,追加到ul1中
        var $newLi = $('<li>我是新創(chuàng)建的li標(biāo)簽</li>');
        $newLi.appendTo($('#ul1'));
      });
      
      //4.prependTo()
      //子節(jié)點(diǎn).prependTo(父節(jié)點(diǎn)); //作為第一個(gè)子元素添加.
      $('#btnPrependTo').click(function () {
        //1.1 新創(chuàng)建一個(gè)li標(biāo)簽,追加到ul1中
        var $newLi = $('<li>我是新創(chuàng)建的li標(biāo)簽</li>');
        $newLi.prependTo($('#ul1'));
      });


    });
  </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個(gè)li標(biāo)簽</li>
  <li>我是第2個(gè)li標(biāo)簽</li>
  <li id="li3">我是第3個(gè)li標(biāo)簽</li>
  <li>我是第4個(gè)li標(biāo)簽</li>
  <li>我是第5個(gè)li標(biāo)簽</li>
</ul>

<ul id="ul2">
  <li>我是第1個(gè)li標(biāo)簽2</li>
  <li>我是第2個(gè)li標(biāo)簽2</li>
  <li id="li32">我是第3個(gè)li標(biāo)簽2</li>
  <li>我是第4個(gè)li標(biāo)簽2</li>
  <li>我是第5個(gè)li標(biāo)簽2</li>
</ul>
</body>

jquery中如何增加子節(jié)點(diǎn)

感謝各位的閱讀，以上就是“jquery中如何增加子節(jié)點(diǎn)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)jquery中如何增加子節(jié)點(diǎn)這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手