The jQuery insertAfter() method is used to insert the specified contents after the selected elements, the same as that of the jQuery after() method. The only difference is in the syntax and placement of the content and target in these two methods.
In the after() method, the selected element is treated as a target and the content to be inserted is treated as an argument of the after() method.
Syntax:
$(selector).after(content)
In the insertAfter() method, the content to be inserted is the selected element, and the target is treated as an argument of the insertAfter() method.
Syntax:
$(content).insertAfter(selector)
Content:
- Content is a compulsory parameter, as it specifies the content to be inserted after the selected element.
- It can accept the following values: HTML elements, jQuery objects, and DOM elements.
Selector:
- It is also a mandatory parameter, as it specifies the place where the content needs to be inserted.
Example:
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span>How are you?</span>").insertAfter("p");
});
});
</script>
</head>
<body>
<button>Click me</button>
<p>Hello!</p>
</body>
</html>
