Can I add tags to divs using jquery?-Front-end Q&A-php.cn

Can I add tags to divs using jquery?

青灯夜游

Release： 2023-01-28 16:34:33

Original

2124 people have browsed it

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>

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

【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!