重点：
append方法：append所选元素最后面增加
prepend方法：prepend所选元素的最前面添加
after方法:after所选元素后一个添加
before方法：before所选元素前一个添加
appendTo方法：appendTo插入到指定节点的后面
prependTo方法：prependTo是插入指定节点最前，方法跟其他一致
insertAfter方法：insertAfter插入到指定节点后一个，方法跟其他的一致
insertbefore：insertbefore插入到指定节点前一个，方法跟其他的一致
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
li {
list-style: none;
margin: 20px;
}
</style>
</head>
<body>
<ul>
<li>append方法</li>
<li>prepeng方法</li>
<li>after方法</li>
<li>befort方法</li>
</ul>
<button>append方法改变</button>
<button>prepeng方法改变</button>
<button>after方法改变</button>
<button>befort方法改变</button>
<p>增加第一个被移动的</p>
<p>增加第二个被移动的</p>
<p>增加第三个被移动的</p>
<p>增加第四个被移动的</p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//append方法：所选元素最后面增加
// $('button').eq(0).on('click',function(){
// var li=$('<li>').text('你说这样的办法对不对？').css('background','red')
// $('ul').append(li)
// })
// //eq0等于第一个
// //on的写法是（'时间'，'运行'）
// //text新增文本
// //append（li），直接把生成的变量让append函数获取
// //prepend方法：所选元素的最前面添加
// $('button').eq(1).on('click',function(){
// var li=$('<li>').text('你说这样的办法对不对？').css('background','red')
// $('ul').prepend(li)
// })
// //after方法:所选元素后一个添加
// $('button').eq(2).on('click',function(){
// var li=$('<li>').text('你说这样的办法对不对？').css('background','orange')
// $($('li:eq(1)')).after(li)
// })
// //before方法：所选元素前一个添加
// $('button').eq(3).on('click',function(){
// var li=$('<li>').text('你说这样的办法对不对？').css('background','orange')
// $($('li:eq(3)')).before(li)
// })
// //before方法移动插入
// $('button').eq(3).on('click',function(){
// var li=$('<li>').text('你说这样的办法对不对？').css('background','orange')
// $($('li:eq(3)')).before($('p:eq(0)'))
// })
//appendTo方法，插入到目标节点的后面
$('button').eq(0).on('click',function(){
var li=$('<li>').css('background','blueviolet').html('这样的操作可以吧')
li.appendTo($('ul'))
})
//appendTo方法，是插入方法，插入语法为：目标.appendto（$（'插入到哪里'））
//appendTo方法，也是插入到目标元素最后的方法
$('button').eq(1).on('click',function(){
var li=$('<li>').css('background','#008000').html('这样的操作不行')
li.prependTo($('ul'))
})
//prependTo方法是插入元素最前，方法跟其他一致
$('button').eq(2).on('click',function(){
var li=$('<li>').css('background','#008000').html('这样的操作不行')
li.insertAfter($('li:eq(2)'))
})
//insertAfter插入到指定元素后一个，方法跟其他的一致
$('button').eq(3).on('click',function(){
var li=$('<li>').css('background','#008000').html('这样的操作不行')
li.insertBefore($('li:eq(1)'))
})
//insertbefore插入到指定元素前一个，方法跟其他的一致
</script>
</html>
