实现方法在最后面
说起元素插入,那就不得不说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>
运行结果
由此我们可以知道
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
结束!