jQuery insertAfter()

The jQuery insertAfter() method is used to insert the specified contents after the selected elements, same as that of jQuery after() method. The only difference is in the syntax and placement of the content and target in these two methods.

In 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 insertAfter() method, the content to be inserted is the selected element and 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.
  • Its can accept following values: HTML elements, jQuery objects and DOM elements.

Selector:

  • It is also a mandatory parameter, as it specifies the place where the content need 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>

Try it

JS Bin on jsbin.com

Please Share