jQuery中增加子节点的方法有哪些,用法是什么?
Admin 2022-02-14 群英技术资�
jQuery中增加子节点的方法有哪些?在jquery中,想要在父节点中增加子节点,我们可以使用append()、appendTo()、prepend()和prependTo()这四种方法,那么具体怎样实现增加子节点呢?下面我们具体的了解看看这些用法的使用�
本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑�
在jquery中,想要在父节点中增加子节点,有多种方法�
append():向所选元素内部的“末尾处”插入内容�
appendTo():向所选元素内部的“末尾处”插入内容�
prepend():向所选元素内部的“开始处”插入内容�
prependTo():向所选元素内部的“开始处”插入内容�
示例�
<script> $(function () { //1.append(); //父节�.append(子节�); //作为最后一个子元素添加. $('#btnAppend').click(function () { //1.1 新创建一个li标签,追加到ul1� // var $newLi = $('<li>我是新创建的li标签</li>'); // $('#ul1').append($newLi); //1.2 获取ul1中的某一个li标签,追加到ul1�. //剪切过来作为最后一个子元素添加. // var $li3 = $('#li3'); // $('#ul1').append($li3); //1.3 获取ul2中的某一个li标签,追加到ul1�. //剪切过来作为最后一个子元素添加. var $li32 = $('#li32'); $('#ul1').append($li32); }); //2.prepend() //父节�.prepend(子节�); //作为第一个子元素添加. $('#btnPrepend').click(function () { //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中增加子节点的方法就介绍到这,上述四种方法及示例具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多大家可以关注群英网络其它的相关文章�
文本转载自PHP中文�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章给大家分享的是有关vue中tab切换页面实现的内容,tab切换页面的应用场景有很多,小编觉得挺实用的,因此分享给大家做个参考,下面是四种实现tab切换页面的方法,感兴趣的朋友可以参考�
reduce()方法对数组中的每个元素执行一个reducer函数,并将其结果总结为单个返回值。它接收两个参数,一个reducer函数提供给数组的每个调用,一个可选的初始值参数�
这篇文章主要为大家详细介绍了JS实现鼠标移动拖尾效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
vue怎样自动导入公共组件?其实想要实现自动导入公共组件并不困难,但是有一些问题以及规则需要注意,下面小编就给大家介绍一下vue导入公共组件的方法和步骤�
这篇文章我们来了解JavaScript中wrap()方法的使用,下文介绍了wrap()方法的用处,基本语言以及相关示例,对大家学习wrap()方法会有一定的参考价值,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078