jQuery after()

Filed Under: jQuery

jQuery after method can be used to add HTML content, DOM element, or jQuery object to insert after each element in the set of matched elements. We can also have function in jQuery after method that returns content to add after the set of matched elements.

jQuery after

jQuery after method is same as insertAfter() and the difference is in the syntax with the placement of target element and content to add.

Here is an example page where I am dynamically adding new paragraph and text box in HTML page using jQuery.


<html>
<head>
<title>jQuery after() Examples</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
function addNewParagraph(){
	$("p:first").after("<p background-color=red>Dynamic Paragraph</p>");
}

function addNewTextbox(){
	$("input:text:last").after("<br><input type='text' name='text2'>");
}
</script>
</head>
<body>
<p>First Paragraph</p>
<input type="button" onclick="addNewParagraph()" value="Add Paragraph">
<br><br>
<input type="text" name="text1">
<br>
<input type="button" onclick="addNewTextbox()" value="Add Textbox">
</body>
</html>

jQuery after – Try it Yourself

Comments

  1. Thirumalai says:

    your website is super .pls give me more than example for java logic programmes

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages