四个点：
// 1.appendTo() 将内容动态添加到节点的最后面
//传入的参数是 $('添加的内容').appendTo('要插入最的节点')
//作用：将内容插入到目标节点内容的最后面
// 2.prependTo 将内容动态添加到节点的前面
//传入的参数是 $('添加的内容').prependTo('要插入最的节点')
//作用：将内容插入到目标节点内容的最前面
// 3.InsertAfter 将内容插入到目标节点之后, 会跑出目标节点
//传入的参数是 $('添加的内容').insertAfter($('节点'))
//作用：将内容插入到目标节点的后面
// 4.InsertBefore 将内容插入到目标节点之前
// 传入的参数是 $('添加的内容').InsertBefore($('节点'))
//作用：将内容插入到目标节点的前面
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id=btn1> appendTo 用法</button>
<button id=btn2> prependTo 用法</button>
<button id=btn2> InsertAfter 用法</button>
<button id=btn2> InsertBefore 用法</button>
<p>
<span>前面</span>
<span>后面</span>
</p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 1.appendTo() 将内容动态添加到节点的最后面
//传入的参数是 $('添加的内容').appendTo('要插入最的节点')
//选择第一个button 并添加点击事件,将动态生成的 a 添加到 p内容的最后面
//作用：将内容插入到目标节点内容的最后面
$('button').eq(0).on('click',function(){
var a1 = $('<a href="www.baidu.com">百度一下</a>')
$(a1).appendTo('p')
})
// 2.prependTo 将内容动态添加到节点的前面
//传入的参数是 $('添加的内容').prependTo('要插入最的节点')
//选择第二个button 并添加点击事件,将动态生成的 a 添加到 p内容的最前面
//作用：将内容插入到目标节点内容的最前面
$('button').eq(1).on('click',function(){
var a1 = $('<a href="www.baidu.com">百度一下</a>')
$(a1).prependTo('p')
})
// 3.InsertAfter 将内容插入到目标节点之后, 会跑出目标节点
//传入的参数是 $('添加的内容').insertAfter($('节点'))
//作用：将内容插入到目标节点的后面
$('button').eq(2).on('click',function(){
var a1 = $('<a href="www.baidu.com">百度一下</a>')
a1.insertAfter($('p'))
})
// 4.InsertBefore 将内容插入到目标节点之前
// 传入的参数是 $('添加的内容').InsertBefore($('节点'))
//作用：将内容插入到目标节点的前面
$('button').eq(3).on('click',function(){
var a1 = $('<a href="www.baidu.com">百度一下</a>')
a1.insertBefore($('p'))
})
</script>
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
