Trending September 2023 # How To Use Jquery Insertafter() With Examples? # Suggested October 2023 # Top 14 Popular

You are reading the article How To Use Jquery Insertafter() With Examples? updated in September 2023 on the website Benhvienthammyvienaau.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 How To Use Jquery Insertafter() With Examples?

Introduction to jQuery insertAfter()

The insertAfter() method is one of the inbuilt functions provided by JQuery, that is used to insert some content after the specified element or set of elements. The insertAfter() method adds up a text or an HTML content with the matched elements. Another JQuery method called, after() method works in the same manner but differs in the precedence and placement of the target elements and the matched elements, that is, they differ in syntax specific difference. The .after() method puts the content after the target method or container. Whereas in the .insertAfter() method, the content is preceding the method, as a selector expression or as a markup created as well and the content is placed after the target element or container.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

How to Use jQuery insertAfter() Method?

The insertAfter() method is an inbuilt function in JQuery which is also easy to use. Below is the simple syntax to use the insertAfter() method.

$("HTML Content to be inserted").insertAfter("Target Element / Selector to be inserted after");

Parameters:

Content: One of the important parts of the insertAfter method. The ‘Content’ here is the HTML content that specifies what is to be inserted.

Selector: The ‘Selector’ is the parameter that tells us which element is the target, that is, after which container or element the ‘Content’ is to be added. This method does not return any value.

Examples to Implement JQuery insertAfter()

Below are some examples of jQuery InsertAfter() which are as follows:

Example #1

Code:

$(document).ready(function(){ }); });

Output:

When the above code is executed, the following is the output that we get.

You shall note the following points that can be learned from the above code.

Example #2

Code:

We get the below output when the above code is executed.

Output:

Note: as we mentioned above, the HTML CONTENT is added after ALL the instances of the TARGET element, that are appearing in the program or the code.

Example #3

Consider another simple example showing the usage of this method.

Code:

When we execute the above code, the following output is displayed.

Output:

Example #4

Code:

$(document).ready(function(){ $(“h1”).insertAfter(“p”); }); });

Output:

When the insertAfter method is used like this, the HTML Content to be added is an existing content of the HTML page, then it does not simply insert after the target. If an element is selected as we did in the above code, the element will be MOVED and not cloned and the code returns a new set that consists of the newly inserted element.

Also know that if there are more than one position or instance of the TARGET, after which our selected(existing) HTML content is to be added, the cloned instances of the HTML content will be created and inserted after each TARGET element, then the code returns the first set plus the new cloned set.

Conclusion

The insertAfter() method is one of the inbuilt but simple methods that is provided by the JQuery that helps insert HTML elements, whether newly created or are selected from the existing element on the page. There is another function called insertBefore() Function, which you can use, as the name suggests and you must have guessed already, to insert HTML elements BEFORE the selected elements. It works in the same manner as does the insertAfter() method.