Home  >  Article  >  Web Front-end  >  Can I add tags to divs using jquery?

Can I add tags to divs using jquery?

青灯夜游
青灯夜游Original
2023-01-28 16:34:332120browse

You can add tags to divs using jquery. 4 methods: 1. Use append() to insert a sub-tag at the end of the div element, the syntax is "$("div").append(element)"; 2. Use prepend() to insert a sub-tag at the beginning of the div element, the syntax "$("div").prepend(element)"; 3. Use appendTo() to insert a subtag at the end of the div element; 4. Use prependTo() to insert a subtag at the beginning of the div element.

Can I add tags to divs using jquery?

The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.

You can add tags in divs with jquery. There are 4 methods:

  • append() method: Insert content to the "end" inside the selected element.

  • prepend() method: Insert content to the "beginning" inside the selected element.

  • appendTo() method: Insert the specified content at the end of the selected element (but still inside the element). But you cannot use functions to append content.

  • prependTo() method: Insert the specified content at the beginning of the selected element (but still inside the element).

Jquery method of adding nodes

Let’s take this simple example to illustrate

1. append method

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

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

## 2. prepend method

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

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

    })
</script>

3. appendTo method

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

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

4. prependTo method

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

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

【Recommended learning:

jQuery video tutorial, web front-end video

The above is the detailed content of Can I add tags to divs using jquery?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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