码迷,mamicode.com
首页 > 其他好文 > 详细

jquary中的创建节点和添加节点的方法

时间:2018-02-02 21:59:48      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:href   log   并且   百度   style   script   创建   方法   nbsp   

今天来说一下针对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>

 技术分享图片

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

jquary中的创建节点和添加节点的方法

标签:href   log   并且   百度   style   script   创建   方法   nbsp   

原文地址:https://www.cnblogs.com/web001/p/8406998.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!