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

Posted 2020-10-23 麦兜家园

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquary中的创建节点和添加节点的方法相关的知识，希望对你有一定的参考价值。

今天来说一下针对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中的创建节点和添加节点的方法的主要内容，如果未能解决你的问题，请参考以下文章

无法将数据添加到 Firebase 中的不同节点

js怎样添加、移除、移动、复制、创建和查找节点？