The after() method inserts specified content after the selected elements.To insert content before selected elements, use the before() method.The .after() and .insertAfter() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .after(), the selector expression preceding the method is the container after which the content is inserted. With .insertAfter(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.
Syntax:
|
$(selector).after(content,function(index))
|
Example :
|
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").after("<p>Hello world! How Are You
?</p>");
});
});
</script>
</head>
<body>
<button>Insert content after each p element</button>
<p>This is a paragraph.
hi friends How are you ?.</p>
<p>This is another paragraph........</p>
</body>
</html>
|
