JQ DOM操作实例-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ-DOM操作-1</title>
<script src="jquery.min.js" type="text/javascript"></script>

</head>

<body>
<div id="aa" style="border:1px solid #F00;">-我是测试DIV-</div>
<p id="p1" style="border:3px solid #060;">-我是测试1号-</p>

=============我是分割线================

<div id="bb" style="border:1px solid #F00;">-我是测试DIV2号-</div>
<p id="p2" style="border:3px solid #060;">-我是测试2号-</p>

==============我是分割线===============<br />

<div id="cc" style="border:1px solid #F00;">-我是测试DIV3号-</div>
<p id="p3" style="border:3px solid #060;">-我是测试3号-</p>
<p id="p3-1" style="border:3px solid #060;">-我是测试3号的影子-</p>

<script>
    $(function(){
        //选择器内部增加元素,即把文字“我加入DIV内部”加入到id为aa的DIV容器之内
        $("#aa").append("我加入DIV内部，我要和DIV1号合体！！");

        //把ID为aa的DIV加入到p元素容器之内
        $("#aa").appendTo("#p1");

        //把文字“前置我吧”加入到ID为bb的DIV容器之内的最前面
        $("#bb").prepend("前置我吧！");

        //把ID为p2的元素加入到ID为bb的div容器之内的最前面
        $("#p2").prependTo("#bb");

        //把文字”我是跟在……“放置于DIV3号后面。
        $("#cc").after("我是跟在测试DIV3号后面的，不是和他合体，而是排到他后面。")

        //把文字”我是跟在……“放置于DIV3号前面。
        $("#cc").before("我是在测试DIV3号前面的，不是和他合体，而是到他前面。")
        //把#cc放置与p3的后面，不与p3合体。
        $("#cc").insertAfter("#p3");
        //把#p3-1放置于cc的前面，不与cc合体。
        $("#p3-1").insertBefore("#cc");
        })
</script>
</body>
</html>