How to add node with jquery?-JS Tutorial-php.cn

How to add node with jquery?

青灯夜游

Release： 2020-11-30 17:23:13

Original

8419 people have browsed it

Method: 1. Use append() to insert a content node at the end of the selected element; 2. Use prepend() to insert a content node at the beginning of the selected element; 3. Use appendTo() to insert a content node at the beginning of the selected element. Insert an element node at the end of the selected element; 4. Use prependTo() to insert an element node at the beginning of the selected element.

How to add node with jquery?

The operating environment of this tutorial: windows10 system, jquery2.2.4, this article is applicable to all brands of computers.

Related recommendations: "jQuery Video"

jquery method of adding nodes

Just take it This is a simple example to illustrate

##1. append method

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

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

Copy after login

2. prepend method

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

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

    })
</script>

Copy after login

3. appendTo method

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

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

Copy after login

4. prependTo method

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

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

Copy after login

5. after method

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

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

Copy after login

6. before method

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

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

Copy after login

Okay~ The above are several methods for adding nodes, all of them can be used, but they can be used in specific projects. Use it according to the situation!

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of How to add node with jquery?. For more information, please follow other related articles on the PHP Chinese website!