jQuery文档处理(一)--内部插入，外部插入，删除

来源：互联网发布：易语言30000源码编辑：程序博客网时间：2024/06/07 14:10

jQuery文档处理

1: 内部插入

A.append(B) 将B插入到A的内部后面（之后的串联操作，操作A）

    <A>        ....        <B></B>    <A>

A.prepend(B) 将B插入到A的内部前面

    <A>        <B></B>        ....    <A>

A.appendTo(B) 将A插入到B的内部后面（之后的串联操作，操作A）
A.prependTo(B) 将A插入到B的内部前面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>内部插入节点.html:添加子节点</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>    </head>    <body>         <ul id="city">             <li id="bj" name="beijing">北京</li>             <li id="tj" name="tianjin">天津</li>             <li id="cq" name="chongqing">重庆</li>         </ul>          <ul id="love">             <li id="fk" name="fankong">反恐</li>             <li id="xj" name="xingji">星际</li>         </ul>        <div id="foo1">Hello1</div>     </body><script type="text/javascript">    $(document).ready(function(){        //把城市天津加入到love的最后        var $tj = $("#tj");        var $love = $("#love");        //$love.append($tj);        //$tj.appendTo($love);        //把城市天津加入到love的前面        $love.prepend($tj);        //$tj.prependTo($love);    });</script></html>

2: 外部插入

A.after(B) , 将B插入到A后面（同级）

    <A></A>    <B></B>

A.before(B) ，将B插入到A前面

    <B></B>    <A></A>

A.insertAfter(B) , 将A插入到B后面（同级）

    <B></B>    <A></A>

A.insertBefore(B) 将A插入到B前面

    <A></A>    <B></B>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>04_外部插入节点.html:添加兄弟节点</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>    </head>    <body>         <ul id="city">             <li id="bj" name="beijing">北京</li>             <li id="tj" name="tianjin">天津</li>             <li id="cq" name="chongqing">重庆</li>         </ul>         <p  id="p3">I would like to say: p3</p>         <p  id="p2">I would like to say: p2</p>         <p  id="p1">I would like to say: p1</p>    </body><script type="text/javascript">    $(document).ready(function(){        var $city = $("#city");        var $p2 = $("#p2");        //把city插入到p2前面        //$p2.before($city);        //$city.insertBefore($p2);        //把city插入到p2后面        //$p2.after($city);        $city.insertAfter($p2);    });</script></html>

删除

empty() 清空标签体
remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件或绑定数据都会被移除
detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件或绑定数据都保留

绑定数据
data(name) 获得
data(name,value) 设置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>05_删除节点.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>    </head>    <body>         <ul id="city">             <li id="bj" name="beijing">北京<p>海淀区</p></li>             <li id="tj" name="tianjin">天津<p>河西区</p></li>             <li id="cq" name="chongqing">重庆</li>         </ul>        <p class="hello">Hello</p> how are <p>you?</p>     </body><script type="text/javascript">    $(document).ready(function(){        //绑定事件        $("#city").click(function(){            alert("city");        });        //绑定数据        $("#city").data("dly","beautiful");        //alert($("#city").data("dly"));        //删除的同时会返回被删除的对象        //var $city = $("#city").remove();//对象绑定的事件不会保留,绑定的数据也不会保留        var $city = $("#city").detach();//对象绑定的事件会保留,绑定的数据也会保留        //再次使用$city        $("body").prepend($city);        alert($city.data("dly"));    });</script></html>

1 0