JQuery使用before、after、remove、empty实现元素节点的创建、插入、清空内容、删除

<style>
.fk{
background:#CC3;
width:50px;
height:50px;
color:#FF0;
text-align:center;
vertical-align:middle;
line-height:50px;
font-size:16px;
float:left;
margin:10px;
}
.selectedDiv{background:#F36;}
.clear{clear:both;}
</style>
<script src="jquery-3.2.1.js"></script>
<script>
var i=1;
function createNewDiv(){
//创建新节点
var newdiv=$("<div class='fk'>"+i+"</div>")
//对新节点绑定单击事件
$(newdiv).click(function(){
//先判断单击的DIV是不是已经有了selectedDiv样式
var found=false;//表示有没有类selectedDiv
var thisobj=this;//代表被点击的呢个Div
//each循环，逐一对比具有selectedDiv的元素是不是和单击的元素是同一个
$(".selectedDiv").each(function(index,element){遍历当前元素与我们选择的元素一致，就found=true
if(element==thisobj){
found=true;//代表单击的DIV已经有了类selectedDiv
}
});
//如果已经有则删除，没有则添加
if(found){
$(this).removeClass("selectedDiv");
}else{
$(this).addClass("selectedDiv")
}
})
i++;
return newdiv;
}
$(function(){
$("button:eq(0)").click(function(){
var newdiv=createNewDiv();
$("div[class=clear]").before(newdiv);
});
$("button:eq(1)").click(function(){
var newdiv=createNewDiv();
$(".selectedDiv").eq(0).before(newdiv);
});
$("button:eq(2)").click(function(){
$selecteddiv=$(".selectedDiv:eq(0)");
if($selecteddiv.length>0){
var newdiv=createNewDiv();
$($selecteddiv).after(newdiv);
}
});
$("button:eq(3)").click(function(){
$(".selectedDiv").remove();
});
$("button:eq(4)").click(function(){
$(".selectedDiv").empty();
});
});
</script>
<body>
<div>
<div class="clear"></div>
</div>
<fieldset>
<legend>创建节点</legend>
<button>创建元素节点DIV</button>
</fieldset>
<fieldset>
<legend>插入节点</legend>
<button>插入---前</button>
<button>插入---后</button>
</fieldset>
<fieldset>
<legend>删除</legend>
<button>移出选中的</button>
<button>清空内容</button>
</fieldset>
</body> JQuery使用before、after、remove、empty实现元素节点的创建、插入、清空内容、删除