<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档处理</title>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#box ul li').append('<h3>新添加的</h3>');//向每个匹配的元素内部追加内容
$('#box ul').appendTo('div');//把所有匹配的元素追加到另一个指定的元素集合中,首先要存在div标签
$('#box ul li').prepend('<h3>添加到前面</h3>');//添加到元素的前面
$('#box ul li').prependTo('');//将所有匹配的元素添加到指定元素集合的最前面
// after(content)//在每个匹配元素之后插入内容
// before(content)//在每个匹配元素之前插入内容
$('#box ul li').insertAfter('ol');//将所有匹配的元素插入到另一份指定的元素元素集合的后面，原来的没有了
$('#box ul li').insertBefore('ol');//将所有匹配的元素插入到另一份指定的元素元素集合的前面，原来的没有了
})
</script>
<style type="text/css">
#box{
width:500px;
height: 300px;
margin:0 auto;
border:1px solid green;
}
div{
border:1px solid green;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div></div>
<ol></ol>
</body>
</html>