Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

How to Make jQuery Insert After Target: Add Content After Elements

Reading time 1 min
Published Jan 19, 2018
Updated Oct 1, 2019

jQuery Insert After: Main Tips

  • The .insertAfter() jQuery method adds content after the specified elements.
  • .insertAfter() differs from .after() since the new content is added as a selector expression.

Usage of .insertAfter()

The .insertAfter() jQuery function includes new content after the indicated elements. The following example adds new content after the <div> element:

Example
$("button").click(() => {
    $("<h1>Hello world!</h1>").insertAfter("div");
});

Follow this syntax to use the jQuery insert after method:

$(content).insertAfter(target);

jQuery .insertAfter() method accepts two arguments:

  • content represents the HTML elements or tags to insert.
  • target indicates after which elements should new content be added. It can be defined in either a selector, or a jQuery object, HTML string, element, or an array of them.

Tip: use jQuery .insertBefore() method to add content before specified elements.