此案例演示了使用appendTo()、prependTo()、insertBefore()、insertAfter()完成对页面文档的控制的方法。
代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery添加操作演示</title>
</head>
<body>
<ul>
<li>方法名：</li>
<li>语法：content.appendTo(selector)</li>
<li>功能：向目标结尾插入匹配元素集合中的每个元素</li>
</ul>
<hr>
<ul>
<li>方法名：prependTo()</li>
<li>content.appendTo(selector)</li>
<li>功能：向目标开头插入匹配元素集合中的每个元素</li>
</ul>
<hr>
<ul>
<li>方法名：insertBefore()</li>
<li>功能：把匹配的元素插入到另一个指定的元素集合的前面</li>
</ul>
<hr>
<ul>
<li>方法名：insertAfter()</li>
<li>语法：content.appendTo(selector)</li>
</li>
</ul>
<hr>
<p><button>appendTo()演示</button>
<span style="background-color: cyan">appendTo()</span>
</p>
<p><button>prependTo()演示</button>
<span style="background-color: cyan">语法：</span>
</p>
<p>
<button>insertBefore()演示</button>
<li style="background-color: cyan" id="insertBefore">语法：content.appendTo(selector)</li>
</p>
<p>
<button>insertAfter()演示</button>
<li style="background-color: cyan" id="insertAfter">功能：把匹配的元素插入到另一个指定的元素集合的后面。
</p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function() {
$('span').eq(0).appendTo($('li').eq(0))
})
$('button').eq(1).on('click',function() {
$('span').eq(1).prependTo($('li').eq(4))
})
$('button').eq(2).on('click',function() {
$('#insertBefore').insertBefore($('li').eq(6))
})
$('button').eq(3).on('click',function() {
$('#insertAfter').insertAfter($('li').eq(10))
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
