实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文档操作</title>
<style type="text/css">
p{
margin: 0;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
// $(content:要插入的内容).appendTo(selector：把内容追加到哪个元素上)
$(function(){
$('button').eq(0).click(function(){
$('.one').appendTo($('p:eq(0)')).css('color','#FFC0CB')
})
})
// prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。
// $(content:要插入的内容).prependTo(selector：在何处插入)
$(function(){
$('button').eq(1).click(function(){
$('.two').prependTo($('p:eq(1)')).css('color','#DDDDDD')
})
})
// insertAfter() 方法在被选元素之后插入内容。
// $(content:要插入的内容).insertAfter(selector：在何处插入被选元素)
$(function(){
$('button').eq(2).click(function(){
$($('p:eq(2)').css('color','#F4A460')).insertAfter('.three')
})
})
// insertBefore() 方法在被选元素之前插入内容。
// $(content:要插入的内容).insertBefore(selector ：在何处插入被选元素)
$(function(){
$('button').eq(3).click(function(){
$($('p:eq(3)').css('color','#CD5C5C')).insertBefore('.four')
})
})
</script>
</head>
<body>
<h2>jQuery 文档操作</h2>
<div class="one">appendTo()</div><br>
<div class="two">prependTo()</div><br>
<div class="three">insertAfter()</div><br>
<div class="four">insertBefore()</div><br>
<p>Hello appendTo</p><br>
<p>Hello prependTo</p><br>
<p>Hello insertAfter</p><br>
<p>Hello insertBefore</p><br>
<button>appendTo</button>
<button>prependTo</button>
<button>insertAfter</button>
<button>insertBefore</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
