zoukankan      html  css  js  c++  java
  • jquery中的创建节点和添加节点的方法

    今天来说一下针对jquary关于创建节点和添加节点的方法,先来看看创建节点:

    1、直接添加节点内容即可

      $("div").append('<a href="http://www.baidu.com">百度一下</a>');

    2、可以创建jquary对象添加进去

    var $li=$('<a href="http://www.baidu.com">百度一下</a>');
     $("div").append($li)

    以上两种方法都是常用到的。

    接下来就看看如何添加节点:就拿这个简单的小例子说明一下

    1、append方法

    <body>
        <div>我是里面的div</div>
        <p>我是外面p</p>
    </body>
    
    <script>
        $(function(){
            $("div").append($("p"));//添加到元素内容的后面
        })
    </script>    

     2、prepend方法

    <body>
        <div>我是里面的div</div>
        <p>我是外面p</p>
    </body>
    
    <script>
        $(function(){
            $("div").prepend($("p"));//添加到元素内容的前面
    
        })
    </script>

     3、appendTo方法

    <body>
        <div>我是里面的div</div>
        <p>我是外面p</p>
    </body>
    
    <script>
        $(function(){
            $("p").appendTo($("div"));//子元素添加到父元素里,并且添加到父元素内容的后面面
        
        })
    </script>

     

    4、prependTo方法

    <body>
        <div>我是里面的div</div>
        <p>我是外面p</p>
    </body>
    
    <script>
        $(function(){
           $("p").prependTo($("div"));//子元素添加到父元素里,并且添加到父元素内容的前面
        
        })
    </script>

     

    5、after方法

    <body>
        <div>我是里面的div</div>
        <p>我是外面p</p>
    </body>
    
    <script>
        $(function(){
           $("div").after($("p"));//添加到自己的后面
        
        })
    </script>

     6、before方法

    <body>
        <div>我是里面的div</div>
        <p>我是外面p</p>
    </body>
    
    <script>
        $(function(){
           $("div").before($("p"));//添加到自己的前面
        
        })
    </script>

     

    好了~以上便是添加节点的几个方法,都可以用,不过具体项目中可以根据情况来具体使用!

  • 相关阅读:
    构建一个应用,并在docker compose里运行起来
    docker engine docker-compose部署
    django 返回数据的几种常用姿势
    fiddler+httprunner 零编码实现接口自动化DEMO
    选择排序
    曾经学的那些表示时间复杂度的公式怎么来的?
    python+Airtest+android使用AirtestIDE编写一个DEMO
    怎么计算时间复杂度?
    算法_冒泡排序python+java实现
    2020年1月16日(多进程)
  • 原文地址:https://www.cnblogs.com/web001/p/8406998.html
Copyright © 2011-2022 走看看