Home > Web Front-end > JS Tutorial > How to add node with jquery?

How to add node with jquery?

青灯夜游
Release: 2020-11-30 17:23:13
Original
8374 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template