jquery中如何增加子节点

技术jquery中如何增加子节点这篇文章主要讲解了“jquery中如何增加子节点”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery中如何增加子节点”吧!

本文主要讲解“如何在jquery中添加子节点”,简单明了,易学易懂。现在,请跟随边肖的思路,一起学习学习“如何在jquery中添加子节点”!

添加方法:1。使用“父节点。追加(子节点)”语句;2.使用“父节点。prepend "语句;3.使用“子节点。附录”语句;4.使用语句" $(子节点)。前置到(父节点)”。

jquery中如何增加子节点

本教程操作环境:windows7系统,jQuery 1 . 10 . 2版,戴尔G3电脑。

在jquery中,有许多方法可以将子节点添加到父节点:

Append():将内容“插入”所选元素的末尾。

AppendTo():将内容“插入”到所选元素的末尾。

Prepend():将内容插入所选元素的“开始”部分。

PrependTo():将内容插入所选元素的“开头”。

示例:

脚本

$(function(){ 0

//1 . append();

//父节点。追加(子节点);//添加为最后一个子元素。

$('#btnAppend ')。单击(函数(){ 0

//1.1创建一个新的li标签并将其添加到ul1。

//var$newLi=$('li我是新创建的Li标签/Li ');

//$('#ul1 ')。追加($ NElli);

//1.2在ul1中获取某个li标签,添加到ul1中。

//剪切掉,作为最后一个子元素添加。

//var $ Li=$(' # Li ');

//$('#ul1 ')。追加($ li3

//1.3在ul2中获取某个li标签,添加到ul1中。

//剪切掉,作为最后一个子元素添加。

var $ li32=$(' # li32 ');

$('#ul1 ')。追加($ li32);

});

//2.prepend()

//父节点。prepend(子节点);//添加为第一个子元素。

$('#btnPrepend ')。单击(函数(){ 0

(=NationalBureauofStandards)国家标准局

p;    //2.1 新创建一个li标签,追加到ul1中
        // var $newLi = $('<li>我是新创建的li标签</li>');
        // $('#ul1').prepend($newLi);
        //2.2 获取ul1中的某一个li标签,追加到ul1中.
        //剪切过来作为最后一个子元素添加.
        // var $li3 = $('#li3');
        // $('#ul1').prepend($li3);
        //2.3 获取ul2中的某一个li标签,追加到ul1中.
        //剪切过来作为最后一个子元素添加.
         var $li32 = $('#li32');
         $('#ul1').prepend($li32);
      });
      //3.appendTo();
      //子节点.appendTo(父节点); //作为最后一个子元素添加.
      $('#btnAppendTo').click(function () {
        //1.1 新创建一个li标签,追加到ul1中
        var $newLi = $('<li>我是新创建的li标签</li>');
        $newLi.appendTo($('#ul1'));
      });
      
      //4.prependTo()
      //子节点.prependTo(父节点); //作为第一个子元素添加.
      $('#btnPrependTo').click(function () {
        //1.1 新创建一个li标签,追加到ul1中
        var $newLi = $('<li>我是新创建的li标签</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个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>

jquery中如何增加子节点

感谢各位的阅读,以上就是“jquery中如何增加子节点”的内容了,经过本文的学习后,相信大家对jquery中如何增加子节点这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/96653.html

(0)

相关推荐

  • 死的说法有哪些,“死”的种种说法有哪些

    技术死的说法有哪些,“死”的种种说法有哪些“死”的叫法因时而异,也因死者 的身世、死的原因和方式不同而迥然各异死的说法有哪些。表示等级观念的:皇帝死叫“崩”, 诸侯死叫“薨”,一般士大夫的死,叫“卒”。死的原因和方式不同

    生活 2021年10月26日
  • 石蕊的化学式,紫色石蕊溶液与稀盐酸反应方程式

    技术石蕊的化学式,紫色石蕊溶液与稀盐酸反应方程式紫色石蕊作为酸碱指示剂的原因是电离平衡原理石蕊的化学式,不是化学方程式。石蕊是蓝紫色粉末,它是一个比较复杂的化合物。是从植物中提取得到的蓝色色素,能部分地溶解于水而显蓝色。

    生活 2021年10月28日
  • postgresql中PLProxy如何配置

    技术postgresql中PLProxy如何配置小编给大家分享一下postgresql中PLProxy如何配置,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1.下载plproxy-2.6.tar.gz网

    攻略 2021年11月18日
  • 如何进行ASP.NET Web开发框架中的查询

    技术如何进行ASP.NET Web开发框架中的查询本篇文章为大家展示了如何进行ASP.NET Web开发框架中的查询,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Enterpri

    攻略 2021年11月26日
  • 升级redhat 6.8 默认gdb 7.2到gdb 8.3.1的操作方法

    技术升级redhat 6.8 默认gdb 7.2到gdb 8.3.1的操作方法这期内容当中小编将会给大家带来有关升级redhat 6.8 默认gdb 7.2到gdb 8.3.1的操作方法,文章内容丰富且以专业的角度为大家

    攻略 2021年10月29日
  • wcf并发模式与实例模式(wcf大量数据缓存)

    技术WCF缓存机制怎么理解这篇文章主要讲解了“WCF缓存机制怎么理解”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“WCF缓存机制怎么理解”吧!缓存是很占内存的,缓存也有它

    攻略 2021年12月14日