after method in jQuery with example

Home » jQuery Methods » after method in jQuery with example

after method in jQuery with example

Posted by 20Fingers2Brains on Tags: jQuery Methods

1. after() method insert content after each element in the set of matched elements.
2. after() method inserts the content after the element selected using selector.
3. after() and insertAfter() method performs the same task. They are different by the way they are used. Syntactically they are different.

Example 1 :

        <html>
        <head>
        <title>after</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").after("<h3>Jquery is easy to learn.</h3>")
                });
            });
        </script>
        </head>
        <body>
        <p id="targetP">Jquery is amazing.</p>
        <input type="button" id="myButton" value="After"/>
        <input type="button" id="reset" value="reset" onclick="location.reload()" />
        </body>
        </html>

Demo :

In above example, we have a paragraph element. On click of "after" button the paragraph element is selected and using after() method the content passed as parameter to after() method is rendered after paragraph element.

Example 2 :

<html>
<head>
<title>after</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 () {
        $("#after").click(function () {
            var header = $('h3').detach();
            $('#targetP').after(header);
        });
    });
</script>
</head>
<body>
<h3>This is h3 element.</h3>
<p id="targetP">This is 20Finges2Brains. This is our target.</p>
<input type="button" id="after" value="Click ME !"/>
<input type="button" value="Back To Normal" onclick="location.reload()" />
</body>
</html>

Demo :

In the above example, we have rendered one h3 and one p element. On button click, we are detaching h3 element from document using detach() method, stored in a variable and then it is rendered after paragraph element using after() method.

Example 3 :

<html>
<head>
<title>after</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 () {
        $(":button").click(function () {
            var textToAppend = $('#inputUser').val();
            var appendAfter = $('#elementAfter').val();
            if ($(appendAfter)[0] == undefined || appendAfter == '')
                alert("Enter valid element from the page.");
            else
                $(appendAfter).after(textToAppend);
        });
    });
</script>
</head>
<body>
<div>This is Div element.</div>
<span>This is Span element.</span>
<p>This is paragrah element.</p>
<h3>This is h3 element.</h3>
<b>This is bold element.</b><br /><br />
Enter text to append : <input type="text" id="inputUser" /><br />
Specify element : <input type="text" id="elementAfter" /><br /><br />
<input type="button" id="after" value="Click ME !"/>
<input type="button" value="Back To Normal" onclick="location.reload()" />
</body>
</html>

Demo :

In the above example, we have rendered few elements, two text boxes to accept input from user, and two buttons. One textbox accepts text to append and other accepts the element after which the text will append. Suitable validations are also applied. On click of button, the entered text is appended after the specified element using after() method.