jQuery .after(): Insert Content After Specified Elements

jQuery after: Main Tips

• jQuery .after() method inserts content after the selected element.
• While it works very similarly to the .insertAfter() method, it uses different syntax, which can be important when you're chaining statements.
• To insert content before the element, use .before().

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Using .after() in jQuery

The .after() method makes jQuery append (add content after) elements. In the example below, you can see an additional text paragraph appears below the heading as you click the button:

$("button").click(() => {
    $("h2").after("<p>Surprise text!</p>");
});

Syntax for .after()

The syntax for jQuery .after() is as follows:

$("selector").after(content);

The selector defines the element after which the content will be inserted. The content can refer to jQuery object, DOM element, HTML string, or a text node. It can also be an array of elements or nodes.

If you need to specify more than one piece of content to go after an element, separate them by commas:

$("selector").after(content, content, content, [...]);

Note: since version 1.4, you can also define the content for .after() in jQuery by naming a function that will return the content to add.

Syntax is also where .after() differs from the .insertAfter() method. While they both have the same purpose, their syntax is exactly opposite:

This is especially important when you're using chained statements. When chaining, you apply multiple methods using a single statement, so it is very handy to be able to choose the selector for it more freely.