jQuery insertAfter() Method

The insertAfter() method in jQuery allows you to insert HTML content or a DOM element after the target element(s). This method takes in two parameters: the content or element to be inserted, and the target element or selector after which the content should be inserted.

Here’s the syntax for using insertAfter() method:

$(content).insertAfter(target)

The insertAfter() method is similar to the after() method in jQuery, but it inserts content after the target element(s) rather than after the selected element(s).

jQuery insertAfter() Method example

A simple example code uses the insertAfter() method to insert a new paragraph after an existing paragraph:

<!DOCTYPE html>
<html>
  <head>
    <title>Insert After Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <p>First paragraph</p>
    <p>Last paragraph</p>

    <script>
      var newParagraph = $("<p>New paragraph</p>");
      newParagraph.insertAfter($("p:first"));
    </script>
  </body>
</html>

Output:

In this example, we create a new paragraph element with the text “New paragraph” using jQuery’s $() function, and then use the insertAfter() method to insert it after the first paragraph in the document. The selector $("p:first") selects the first <p> element in the document.

Comment if you have any doubts or suggestions on this Js insertAfter() Method topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

jQuery insertAfter() Method

jQuery insertAfter() Method example

Related