Jquery 《不想工作系列》--整理一下append、prependTo、after的区别

还有其他类似方法，以后再加，直接上代码和图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
  div{
      border:1px solid black;

  }
  #div1{
     height:100px;
	 width:100px;
	 background-color:red;
  }
  #div2{
      height:50px;
	  width:50px;
	  background-color:yellow;
  }
  </style>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

  <script type="text/javascript">
	function append1(){
		$("#div1").append($("#div2"));
	}

	function prependTo1(){
		$("#div2").prependTo($("#div1"));
	}

	function after1(){
		$("#div1").after($("#div2"));
	}
  </script>

 </head>

 <body>

	<div id="div1">div1</div>
	--分割线--
	<div id="div2">div2</div>

	<input type="button" value="append" onclick="append1();"></input>&nbsp;
	<input type="button" value="prependTo" onclick="prependTo1();"></input>&nbsp;
	<input type="button" value="after" onclick="after1();"></input>&nbsp;
 </body>
</html>

`页面初始化

 
 
 

·append

   

 

  

·prependTo

 

·after

 

• 
• 大小: 3.5 KB

• 
• 大小: 3.3 KB

• 
• 大小: 3.6 KB

• 
• 大小: 3.5 KB

• 查看图片附件