BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery insertAfter() Method

Last Updated: July 11, 2022 by Chaitanya Singh | Filed Under: jQuery

The jQuery insertAfter() method inserts the specified html elements after the selected elements. If the specified html element already exists, then the existing element will be moved from the current position and inserted after the selected elements.

Syntax of jQuery insertAfter() method

$(content).insertAfter(selector)

content: This is a mandatory parameter. This contains HTML elements that are inserted after the selected elements by insertAfter() method. This content parameter must always contain html tags.

Important Note: If content field contains already existing html elements then those elements will be moved from the current position and inserted after the selected elements.

selector: This is also a mandatory parameter. This selects the elements, after which the specified content is inserted.

jQuery insertAfter() method Example

In the following example, we are using insertAfter() method to move the H1 tag after the p elements. The H1 tag already exists so the existing H1 tag is moved from current place and appended after the p elements as shown in the output screenshots.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").insertAfter("p");
  });
});
</script>
</head>
<body>

<h1>This is the H1 heading of the page.</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

<button>Move and insert H1 heading after each paragraph.</button>

</body>
</html>

Output:
Before the button click:
jQuery insertAfter() Method
After the button click: The H1 tag is moved and appended after each paragraph.
jQuery insertAfter() Method

❮ jQuery insertBefore()jQuery attr() ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery removeClass() Method
  3. jQuery after() Method
  4. jQuery Sliding Effects
  5. jQuery appendTo() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

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

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap