append method in jQuery with example

Home » jQuery Methods » append method in jQuery with example

append method in jQuery with example

Posted by 20Fingers2Brains on Tags: jQuery Methods

1. append() method insert content to the end of each element in the set of matched elements.
2. append() method expects parameter to be appended.
3. append() method inserts the specified content as the last child of each element in the jQuery object.

Example 1 :

        <html>
        <head>
        <title>append</title>
        <style type="text/css">
        #targetP
        {
        background-color:Orange;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("#targetP").append("<h3>Jquery is easy to learn.</h3>");
                });
            });
        </script>
        </head>
        <body>
        <p id="targetP">Jquery is amazing.</p><br />
        <input type="button" id="myButton" value="append"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

In the above example, we have rendered a paragraph element. On click of "append" button the paragraph element is selected and using append() method h3 element is appended.

Example 2 :

        <html>
        <head>
        <title>append</title>
        <style type="text/css">
        #targetP
        {
        background-color:Orange;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("#targetDiv").append($('p'));
                });
            });
        </script>
        </head>
        <body>
        <p>Jquery is amazing.</p>
        <div id="targetDiv">
        This is Div.
        </div>
        <br />
        <input type="button" id="myButton" value="append"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

In the above example, we are selecting paragraph element using p selector as paramater to append() method.
The append() method selects the p element and appends it to the div element.