jQuery实现元素的插入

 .div{

 width: 200px;

 height: 200px;

 border: 1px solid #008080;

 background-color: #0095FF;

 text-align: center;

 line-height: 200px;

 color: white;

 font-size: 25px;

 float: left;

 }

 #num{

 height: 30px;

 text-align: center;

 font-size: 16px;

 }

 #main{

 width: 100%;

 height: 400px;

 margin-top: 20px;

 }

 button{

 height: 35px;

 }

 .newDiv{

 width: 200px;

 height: 200px;

 border: 1px solid #008080;

 background-color: #009999;

 text-align: center;

 line-height: 200px;

 color: white;

 font-size: 25px;

 float: left;

 }

 插入到第几个元素：

 插入到此元素前面

 插入到此元素后面

 $(function(){

 var mainDiv=$("#main");

 for(var i=1;i<6;i++){

 var $divs=$("我是第"+i+"个")

 mainDiv.append($divs)

 }

 var newDiv=$("我是新的");

 var front=$("#insertFront")

 var back=$("#insertBack")

 front.click(function(){

 var numVal=parseInt($("#num").val());

 var div1=document.getElementById("a"+numVal+"");

 newDiv.insertBefore(div1)

 })

 back.click(function(){

 var numVal=parseInt($("#num").val());

 var div1=document.getElementById("a"+numVal+"");

 newDiv.insertAfter(div1);

 })

 })