实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var li = $("<li>").text("我是新节点").css("color", "red")
$("button").eq(0).on("click", function() {
// appendTo()添加新节点
li.appendTo($('ol'))
// appendTo()移动节点
// $("p:first").appendTo('ol')
})
$("button").eq(1).on("click", function() {
// prependTo()添加新节点
li.prependTo($('ol'))
// prependTo()移动节点
// $("p:first").prependTo('ol')
})
$("button").eq(2).on("click", function() {
// insertAfter()添加新节点
// li.insertAfter($('ol'))
// insertAfter()移动节点
$("p:first").insertAfter('ol')
})
$("button").eq(3).on("click", function() {
// insertBefore()添加新节点
li.insertBefore($('li:eq(1)'))
// insertBefore()移动节点
// $("p:first").insertBefore($('li:eq(1)'))
})
})
</script>
</head>
<body>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<button>appendTo()的学习</button>
<button>prepappendTo()的学习</button>
<button>insertAfter()的学习</button>
<button>insertAfter()的学习</button>
<p>我是要被移的节点</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：纳闷为什么使用函数只能增加一次，用代码则可插入若干次。
