實(shí)現(xiàn)方法在最后面
說起元素插入,那就不得不說append、after、before
至于他們3者的區(qū)別 ↓↓↓
<body>
<div class="parent">
我是目標(biāo)元素
</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>
運(yùn)行結(jié)果

3種插入方式結(jié)果.png
由此我們可以知道
append()方法是將元素作為目標(biāo)元素的子元素進(jìn)行插入
afetr()和before()是將元素作為目標(biāo)元素的同胞進(jìn)行插入
除此之外,還有appendT0()、insertAfter()、insertBfore(),
這3個(gè)方法相當(dāng)于是把選擇器匹配的元素(demo中的目標(biāo)元素)和要插入的元素進(jìn)行互換。
給一個(gè)事件添加一個(gè)插入元素的方法是很簡單的,但稍不注意,就會(huì)遇到:元素插入過多,所以,我們需要進(jìn)行限制
click:function(){
//判斷元素是否已插入
if($(this).find(".suspend").length>0){
return false;
}else{
$(this).append("<div class='suspend'>暫未開發(fā)</div>")
}
}, //元素插入
mouseleave:function(){
$(this).find(".suspend").remove();
} //元素移除
在每次插入元素之前先進(jìn)行是否已經(jīng)插入,或是否已經(jīng)插入N個(gè)的一個(gè)判斷
這就是我來限制元素插入次數(shù)的方式
PS:
.size()可以返回選擇器匹配元素的數(shù)量
但是?。?!
當(dāng)沒有這個(gè)元素是否會(huì)出錯(cuò),而.length會(huì)返回為0;
所以我的代碼采用的是.length
結(jié)束!