prepend method in jQuery with examples

Home » JQuery » jQuery Methods » prepend method in jQuery with examples

prepend method in jQuery with examples

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

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

Example 1 :

        <html>
        <head>
        <title>prepend</title>
        <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").prepend("This is This is 20 Fingers and 2 Brains.");
                });
            });
        </script>
        </head>
        <body>
        <p id="targetP">This is p element.</p>
        <input type="button" id="myButton" value="Prepend"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

Demo :

In the above example, we have rendered a paragraph element. on click of "Prepend" button the paragraph element is selected and using prepend() method h3 element is prepended as a first child.

Example 2 :

        <html>
        <head>
        <title>prepend</title>
        <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").prepend($('span'));
                });
            });
        </script>
        </head>
        <body>
        <span>This is 99codingexamples.</span>
        <p id="targetP">This is p element.</p>
        <input type="button" id="myButton" value="Prepend"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

Demo :

In the above example, we are selecting span element using span selector as paramater to prepend() method.
The prepend() method selects the span element and prepends it to the p element.