Introduction:

  • In this article we will explain how to add specified content at the end of the selected element in jquery or What is append() method in jquery or why use append() method in jquery with example.

  • Description:

The jQuery append() method is used to add specified content end of  the selected element. If you want to add content at the beginning of the selected element, you should use jQuery prepend () method.

Syntax:

  • $(selector).append(“content”);

  • Example of jQuery after() method

Let's take an example to demonstrate jQuery append() Method.

!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btntext").click(function () {
                $("p").append(" <b>for beginners and experienced Developers.</b>.");
            });
            $("#btnitem").click(function () {
                $("ul").append("<li><b>Desktop</b></li>");
            });
        });
    </script>
</head>
<body>
    <p>This is a tutorial website.</p>  
    <ul>
        <li>Computer</li>
        <li>Laptop</li>       
    </ul>
    <button id="btntext">Append text</button>
    <button id="btnitem">Append item</button>
</body>
</html>

Output:



In above example when we click on Append text button it will add for beginners and experienced Developers at the end of the paragraph (p) element.

And when we click on Append item button it will add “Desktop” at the end of the ul element.

 

I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like