<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>appendTo(),prependTo(),insertAfter(),insertBefore()使用方法</title>
<style type="text/css">
ul{
background-color: #363636;
width: 300px;
height: auto;
text-align: center;
margin: auto;
padding: 0px;
list-style: none;
color: white;
}
</style>
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p:first').append("<h2>我是第一</h2>")
//append实在元素结尾仍在内部插入指定内容
$('<h2>我是第二</h2>').appendTo('p:eq(1)')
//appendTO也是在元素结尾插入内容，只是内容和选择器位置与append不同
$('p:eq(2)').prepend('<h2>我是第三</h2>')
// prepend是在元素头部插入指定内容
$('<h2>我是第四</h2>').prependTo('p:eq(3)')
// 内容与选择器位置与prepen不同
$('<span>我是之后被插入的内容</span><br>').insertAfter('li')
// insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。
// 注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后
$('<span>我是之前被插入的内容</span><br>').insertBefore('li')
})
</script>
</head>
<body>
<div>
<ul>
<li>
<p>第01</p>
</li>
<li>
<p>第02</p>
</li>
<li>
<p>第03</p>
</li>
<li>
<p>第04</p>
</li>
<li>
<p>第05</p>
</li>
</ul>
</div>
</body>
</html>样式如下![]F%`ICFNAV)S4Z0H5{BTMTB.png](https://img.php.cn//upload/image/693/596/525/1523343063247608.png "1523343063247608.png")
总结：了解了appendTo(),prependTo(),insertAfter(),insertBefore()的用法和不同点。
