jquery
  1. jquery-after
PreviousNext

JQuery after() Method

The after() method in jQuery is used to insert content or elements after a specified element. It can be used to add new content, such as text, HTML, or other elements, immediately after an existing element in the DOM.

Syntax

The syntax for the after() method is as follows:

$(selector).after(content);

Here, the selector parameter specifies the element after which the content or element should be inserted. The content parameter specifies the content that should be added after the selected element.

Use

The after() method is a useful way to dynamically insert new content into an existing HTML document using jQuery. It can be used to create new elements, or to add text, images, links, or other types of content after specific elements on the page.

Example

Here is an example of using the after() method to add a new paragraph after an existing element:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery after() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#myButton").click(function() {
                $("#myDiv").after("<p>This is a new paragraph added after the div using the after() method.</p>");
            });
        });
    </script>
</head>
<body>
    <div id="myDiv">
        <p>This is the content of the first div.</p>
    </div>
    <button id="myButton">Add Paragraph</button>
</body>
</html>
Try Playground

In this example, we use the after() method to add a new paragraph after the myDiv element when the button is clicked. The new paragraph is created with the "<p>" tag and the content "This is a new paragraph added after the div using the after() method.".

Summary

The after() method in jQuery is a powerful tool for dynamically adding content or elements to an HTML document. It is a useful way to insert new content after a specific element on the page and can be used to create new elements, add text, images, links, or other types of content. With the after() method, you can easily modify the content of your webpage and add new functionality with just a few lines of code.

prepend()insertAfter()
Published on: