Home > Web Front-end > JS Tutorial > body text

How to use jQuery append() method

青灯夜游
Release: 2023-01-07 11:41:47
Original
19322 people have browsed it

In jQuery, the append() method can be used to insert specified content to the "end" inside the selected element; the syntax format "$(A).append(B)" means to go inside the A element Insert B content (can include HTML tags) at the end.

How to use jQuery append() method

The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer.

The append() method inserts the specified content at the end (still inside) of the selected element.

Syntax:

$(A).append(B)
Copy after login

$(A).append(B) means inserting B (can include HTML tags) at the end of A.

The following is a code example to see how to use the append() method.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p{background-color:orange;}
    </style>
    <script src="js/jquery-1.10.0.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                var $strong = "<strong>--jQuery教程</strong>";
                $("p").append($strong);
            })
        })
    </script>
</head>
<body>
    <p>php中文网</p>
    <input id="btn" type="button" value="插入"/>
</body>
</html>
Copy after login

Rendering:

How to use jQuery append() method

After we click the [Insert] button, the HTML structure we get is as follows:

<p>php中文网<strong>--jQuery教程</strong></p>
Copy after login

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How to use jQuery append() method. 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