jQuery append() function example

The append() method inserts specified content at the end of the selected elements.

jQuery append() function examples

Example 1 - Appends some HTML to all paragraphs

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>append demo</title>
    <style>
        p {
            background: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p>I would like to say: </p>

    <script>
        $("p").append("<strong>Hello</strong>");
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2 - Appends an Element to all paragraphs

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>append demo</title>
    <style>
        p {
            background: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p>I would like to say: </p>

    <script>
        $("p").append(document.createTextNode("Hello"));
    </script>

</body>

</html>

Example 3 - Appends a jQuery object to all paragraphs

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>append demo</title>
    <style>
        p {
            background: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <strong>Hello world!!!</strong>
    <p>I would like to say: </p>

    <script>
        $("p").append($("strong"));
    </script>

</body>

</html>

Comments