核心提示：!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title/titlestyle#p1{width: 100px;height: 100px;backgr...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#p1{
width: 100px;
height: 100px;
background-color: #007bc5;
}
#p2{
width: 100px;
height: 100px;
background-color: #ffa24a;
}
</style>
</head>
<body>
<p id="p1">
<span>span</span>
</p>
<p id="p2">
</p>
<input type="button" value="btn1" id="btn1"/>
<script src="js/jQuery-2.2.2-min.js"></script>
<script>
/*创建一个元素*/
var op = $("<p>this is p</p>");
var olabel = $("<label>label</label>");
/*将op加入p里面，append,默认将内容放在最后*/
$("#p1").append(op);
$("#p1").append(olabel);
/*js和jquery混合，不符合语法规则*/
//$("#p1").appendChild(op);
/*prepend()将元素追加到所有子元素的最前面*/
$("#p1").prepend(op);
/*prependTo():将选中的元素，加入到目标位置里面*/
//$("label").prependTo("#p2");
/*在制定元素前后追加某一个元素*/
$("label").before("<b>this is b</b>");
$("label").after("<b>this is b2</b>");
/*替换*/
$("<em>em</em>").replaceAll("b");
/*删除节点，empty():将选中的元素内容清空,remove():删除节点*/
//$("#p1").empty();
//$("p").remove("#p2");
/*clone();克隆*/
$("#p2").clone().prependTo("body");
/*true：克隆当前这个元素，将事件也一起克隆，false：只克隆元素*/
var num = 1;
$("#btn1").click(function(){
++num;
$(this).clone(true).val("btn"+num).insertBefore($(this));
});
</script>
</body>
</html>
