實(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è)插入元素的方法是很簡單的,但稍不注意感凤,就會遇到:元素插入過多悯周,所以,我們需要進(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ù)量
但是G菀怼r伎埂毛嫉!
當(dāng)沒有這個(gè)元素是否會出錯(cuò),而.length會返回為0;
所以我的代碼采用的是.length
結(jié)束织咧!