您的位置是:网站首页>Javascript编程Javascript编程

jquery如何添加节点?

少儿编程网2021-09-26 15:38:59Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介方法:1、使用append()在被选元素的结尾插入内容节点;2、使用prepend()在被选元素的开头插入内容节点;3、使用appendTo()在被选元素的结尾插入元素节点;4、使用prependTo()在被选元素的开头插入元素节点。相关推荐:《jQuery视频》jquery添加节点的方法就拿这个简

方法:1、使用append()在被选元素的结尾插入内容节点;2、使用prepend()在被选元素的开头插入内容节点;3、使用appendTo()在被选元素的结尾插入元素节点;4、使用prependTo()在被选元素的开头插入元素节点。JlW少儿编程网-https://www.pxcodes.com

JlW少儿编程网-https://www.pxcodes.com

相关推荐:《jQuery视频》JlW少儿编程网-https://www.pxcodes.com

jquery添加节点的方法JlW少儿编程网-https://www.pxcodes.com

就拿这个简单的小例子说明一下JlW少儿编程网-https://www.pxcodes.com

JlW少儿编程网-https://www.pxcodes.com

1、append方法JlW少儿编程网-https://www.pxcodes.com

<body>
    <div>我是里面的div</div>
    <p>我是外面p</p>
</body>

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

JlW少儿编程网-https://www.pxcodes.com

2、prepend方法JlW少儿编程网-https://www.pxcodes.com

<body>
    <div>我是里面的div</div>
    <p>我是外面p</p>
</body>

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

    })
</script>

JlW少儿编程网-https://www.pxcodes.com

3、appendTo方法JlW少儿编程网-https://www.pxcodes.com

<body>
    <div>我是里面的div</div>
    <p>我是外面p</p>
</body>

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

JlW少儿编程网-https://www.pxcodes.com

4、prependTo方法JlW少儿编程网-https://www.pxcodes.com

<body>
    <div>我是里面的div</div>
    <p>我是外面p</p>
</body>

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

JlW少儿编程网-https://www.pxcodes.com

5、after方法JlW少儿编程网-https://www.pxcodes.com

<body>
    <div>我是里面的div</div>
    <p>我是外面p</p>
</body>

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

JlW少儿编程网-https://www.pxcodes.com

6、before方法JlW少儿编程网-https://www.pxcodes.com

<body>
    <div>我是里面的div</div>
    <p>我是外面p</p>
</body>

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

JlW少儿编程网-https://www.pxcodes.com

好了~以上便是添加节点的几个方法,都可以用,不过具体项目中可以根据情况来具体使用!JlW少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程入门!!

以上就是jquery如何添加节点?的详细内容,更多请关注少儿编程网其它相关文章!JlW少儿编程网-https://www.pxcodes.com

来源:php中文网JlW少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

jquery如何添加节点?

      匿名评论
    • 评论
    人参与,条评论
    jquery如何添加节点?

少儿编程网标签云

微信公众号

免费视频教程

先知道