jQuery中append和prepend——具有剪切功能的方法

最新推荐文章于 2023-03-14 19:33:27 发布

_处女座程序员的日常

最新推荐文章于 2023-03-14 19:33:27 发布

阅读量270

点赞数

分类专栏： css 前端文章标签： jquery javascript html

本文链接：https://blog.csdn.net/qq_42931285/article/details/129312654

版权

前端同时被 2 个专栏收录

372 篇文章 13 订阅

订阅专栏

css

113 篇文章 0 订阅

订阅专栏

文章介绍了jQuery中的.append()和.prepend()方法，用于在元素的末尾或开头添加子元素。当添加的元素已在DOM中时，这两个方法会将其剪切并移动到新位置，分别成为最后一个或第一个子元素。示例代码展示了如何使用这些方法在两个<ul>列表之间移动<li>元素。

摘要由CSDN通过智能技术生成

父元素.append(子元素); //作为最后一个子元素添加.
注意：若子元素存在，则是将子元素剪切走，剪切后作为最后一个子元素添加。

<input type="button" value="append" id="btnAppend"/>
<input type="button" value="prepend" id="btnPrepend"/>
 <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>
 $(function () {
	  //1.append()
    //父元素.append(子元素); //作为最后一个子元素添加.
    $('#btnAppend').click(function () {
      //1.3 把ul2中已经存在的li标签添加到ul1中去.剪切后作为最后一个子元素添加.
      // var $li32 = $('#li32');
      // $('#ul1').append($li32);
    });
      $('#btnPrepend').click(function () {
      //2.2 把ul2中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
      var $li32 = $('#li32');
      $('#ul1').prepend($li32);
    });
})

在这里插入图片描述
点击append按钮：
现象：元素进行了移位置：
过程：先剪切走，再移动到最后一个子元素处。

prepend();

父元素.prepend(子元素); //作为第一个子元素添加
若子元素已存在，则把ul2中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加。

 $(function () {
      $('#btnPrepend').click(function () {
      //2.2 把ul2中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
      var $li32 = $('#li32');
      $('#ul1').prepend($li32);
    });
})

![在这里插入图片描述](https://img-blog.csdnimg.cn/23a3db87b5204f129570ec997f6052ef.png)
点击prepend按钮：
现象：元素进行了移位置：
过程：先剪切走，再移动到第一个子元素处。
![在这里插入图片描述](https://img-blog.csdnimg.cn/46ba57b4cc9849f69a39095035b94692.png)