向父元素内添加其中的子元素会覆盖当前子元素及不覆盖原本子元素的解决方法

最新推荐文章于 2022-03-11 14:28:30 发布

呦不错哦

最新推荐文章于 2022-03-11 14:28:30 发布

阅读量2.1k

点赞数

分类专栏：前端 JavaScript 文章标签：向父元素添加其中的一个子元素会覆盖这个子元素

本文链接：https://blog.csdn.net/qq_25695065/article/details/80204753

版权

前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

JavaScript

12 篇文章 0 订阅

订阅专栏

首先显示初始状态：

<body>
  <div class="parent">
    <div class="child">0</div>
    <div class="child">1</div>
    <div class="child">2</div>
  </div>
  <script src="common/jquery/jquery-3.3.1.js"></script>
  <script>
    $(function(){
      var parent = $('.parent')    //获取父元素
      var childs = parent.children();    //获取所有的子元素
    })
  </script>
</body>

以上显示为：

正常使用append()向父元素内追加第一个子元素:

$(function(){
      var parent = $('.parent')
      var childs = parent.children();
      parent.append(childs.eq(0));    //使用append()向父元素内追加第一个子元素
    })

显示结果为：第一个子元素被拿走后追加到了父元素的末尾。

但是我们要实现我们理想中的追加效果，需要这样的写法：

$(function(){
      var parent = $('.parent')
      var childs = parent.children();
      var childsHTML = parent.html();    //获取包含所有的子元素的字符串
      var rule = /\>\s*\</g;    //匹配到所有的 “ >< ” 或 “ >  <” 字符串
      childsHTML  = childsHTML.replace(rule, '>,<').split(',');    //将所有的子元素分割成数组
      parent.append(childsHTML[0]);    //将选中的元素追加到父元素的最后一位
    })

显示结果为：

呦不错哦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
向父元素内添加其中的子元素会覆盖当前子元素及不覆盖原本子元素的解决方法

首先显示初始状态：&lt;body&gt; &lt;div class="parent"&gt; &lt;div class="child"&gt;0&lt;/div&gt; &lt;div class="child"&gt;1&lt;/div&gt; &lt;div class="child"&a
复制链接

扫一扫

专栏目录