实现方法在最后面
说起元素插入，那就不得不说append、after、before
至于他们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
结束！
网友评论