1. 程式人生 > >jquary中的創建節點和添加節點的方法

jquary中的創建節點和添加節點的方法

子元素 span 關於 .com href 百度一 clas script pre

今天來說一下針對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中的創建節點和添加節點的方法