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

最新推荐文章于 2023-05-14 11:10:28 发布

darling.0

最新推荐文章于 2023-05-14 11:10:28 发布

阅读量1.7k

点赞数 1

分类专栏： web前端文章标签： jquery 文档处理内部插入外部插入删除

本文链接：https://blog.csdn.net/daliyuan350649623/article/details/53765002

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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>

darling.0

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery文档处理(一)--内部插入，外部插入，删除

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的内部后面（之后的串联操作，
复制链接

扫一扫