Jquery文档处理的几种成效 _Web前端

Jquery文档处理的几种效果
Jquery文档处理的几种效果
<html>
<head>
<title>File</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript">
	$(document).ready(function(){
		
		/***在元素内部插入内容***/
		$("#SH").click(function(){
			$("#shp").append("<b>Hello</b>");
		});
		
		/***将内容添加到元素内部***/
		$("#atd").click(function(){
			$("#shp").appendTo("#atdDiv");
		});
		
		/***在元素的最前面插入内容***/
		$("#atp").click(function(){
			$("#prvDiv").prepend($("#preP"));
		});
		
		/***将内容插入在元素的最前面***/
		$("#atpt").click(function(){
			$("#preP").prependTo($("#prvDiv"));
		});
		
		/***将内容插入在元素之后***/
		$("#aft").click(function(){
			$("#aftDiv").after($("#aftP"));
		});
		
		/***将内容插入在元素之前***/
		$("#bef").click(function(){
			$("#aftDiv").before($("#aftP"));
		});
		
		/***将内容包裹在元素内部***/
		$("#wb").click(function(){
			$("#wp").wrap($("#wDiv"));
		});
		
		/***替换***/
		$("#replace").click(function(){
			$("#waitDiv").replaceWith($("#replaceDiv"));
		});
		
		/***清空***/
		$("#empty").click(function(){
			$("#emptyDiv").empty();
		});
		
		/***删除***/
		$("#remove").click(function(){
			$("#emptyDiv").remove();
		});
		
		/***复制***/
		$("#clone").click(function(){
			$("#cloneDiv").clone().insertAfter($("#cloneDiv"));
		});
	});
</script>
<body>
	
	<p id="shp">I would like to say: </p>
	<input type="button" value="Say Hello" id="SH" />
	<br><br><br>
	
	<div style="border:1px red solid" id="atdDiv">Is Nothing</div>
	<input type="button" value="add to div" id="atd" />
	<br><br><br>
	
	<div style="border:1px blue solid" id="prvDiv">Is Previous Div</div>
	<p id="preP">Is Previous P</p>
	<input type="button" value="add to previous" id="atp" />
	<input type="button" value="add to previous 2" id="atpt" />
	<br><br><br>
	
	<div style="border:1px green solid" id="aftDiv">Is A Div
	<p id="aftP">Is A P</p></div>
	<input type="button" value="add after" id="aft" />
	<input type="button" value="add before" id="bef" />
	<br><br><br>
	
	<div style="border:1px pink solid;height:10px" id="wDiv"></div>
	<p id="wp">Is A P</p>
	<input type="button" value="wrap" id="wb" />
	<br><br><br>
	
	<div style="border:1px black solid;height:10px" id="waitDiv">Waiting For Replace</div>
	<div style="border:1px red solid;height:10px" id="replaceDiv">Replaced</div>
	<input type="button" value="replace" id="replace" />
	<br><br><br>
	
	<div style="border:1px red solid;height:10px" id="emptyDiv">Waiting For Delete</div>
	<input type="button" value="empty" id="empty" />
	<input type="button" value="remove" id="remove" />
	<br><br><br>
	
	<div style="border:1px red solid;height:10px;margin-bottom:10px" id="cloneDiv">Waiting For Clone</div>
	<input type="button" value="clone" id="clone" />
	<br><br><br>
</body>
</html>