jQuery实现1次(多次)元素的插入与移除

实现方法在最后面

说起元素插入,那就不得不说appendafterbefore
至于他们3者的区别 ↓↓↓
<body>
<div class="parent">
    我是目标元素
</div>
<script type="text/javascript">
    $(".parent").append("<div class='children'>append</div>"); 
    $(".parent").after("<div class='child'>after</div>");
    $(".parent").before("<div class='child'>before</div>");
</script>
</body>
运行结果
3种插入方式结果.png
由此我们可以知道

append()方法是将元素作为目标元素的子元素进行插入
afetr()和before()是将元素作为目标元素的同胞进行插入

除此之外,还有appendT0()、insertAfter()、insertBfore(),
这3个方法相当于是把选择器匹配的元素(demo中的目标元素)和要插入的元素进行互换。

给一个事件添加一个插入元素的方法是很简单的,但稍不注意,就会遇到:元素插入过多,所以,我们需要进行限制
click:function(){
          //判断元素是否已插入
        if($(this).find(".suspend").length>0){
            return false;
        }else{
            $(this).append("<div class='suspend'>暂未开发</div>")
        }
    },  //元素插入
mouseleave:function(){
        $(this).find(".suspend").remove();
    }  //元素移除

在每次插入元素之前先进行是否已经插入,或是否已经插入N个的一个判断
这就是我来限制元素插入次数的方式

PS:
.size()可以返回选择器匹配元素的数量
但是!!!
当没有这个元素是否会出错,而.length会返回为0;
所以我的代码采用的是.length

结束!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,466评论 0 44
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,767评论 18 399
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 838评论 0 8
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 625评论 0 1
  • 我们从陌生开始,走进彼此陌生的生活, 我们从喜欢开始,喜欢上对方的点点滴滴; 曾几何时,我们也怀疑过自己的判断, ...
    AngelaNine阅读 259评论 3 0