.insertAfter()?.insertAfter(target) inserts every matched element immediately after the target as a sibling (since jQuery 1.0). Same job as .after(), but content comes first.
$("<p>Test</p>").insertAfter(".inner") // create + insert
$("p").insertAfter("#foo") // move existing <p>s
$("#note").insertAfter(".box") // content first
// Same result as: $(".box").after($("#note"))| Need | Use |
|---|---|
| Content-first after | $(content).insertAfter(target) |
| Anchor-first after | $(target).after(content) |
| Content-first before | $(content).insertBefore(target) |
| Inside as last child | $(content).appendTo(target) |
.insertAfter()Select (or create) content, then place it after a target.
.insertAfter(target).| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Content to insert (left side) |
target | Yes | Selector / element / jQuery / HTML string |
| Callback | No | Not supported — use .after(fn) instead |
content = matched elements (or newly created nodes)
targets = resolve(target)
for each target t:
if first target:
move content after t // not cloned
else:
clone content after t // clones for extra targets
return new set of inserted nodes
// (original + clones when multiple targets)Keep these facts handy while inserting siblings.
| Topic | Detail |
|---|---|
| Syntax | $(content).insertAfter(target) |
| Since | jQuery 1.0 |
| Position | Next sibling after target |
| vs after | Same result; content-first vs anchor-first |
| Move / clone | 1 target moves; many targets clone |
| Return | Inserted set (not the target) |
| Callback | None — prepare content first |
Insert a note after the target box, or move an existing line.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Build a new node and place it after each .inner.
$("<p>Test</p>").insertAfter(".inner");$("<p>Test</p>") builds a jQuery set..inner selects every anchor.Official-style demo: move all p elements after #foo.
$("p").insertAfter("#foo");
// same idea as: $("#foo").after($("p"))p is the matched set.#foo is a single anchor.#foo..insertAfter() vs .after()Same DOM result — only the argument order changes.
$("<hr>").insertAfter("#box");
// equivalent:
// $("#box").after("<hr>");One source node is cloned for every extra target.
$("#badge").insertAfter(".card");
// 1st .card → moves #badge
// 2nd+ .card → clones of #badgeid — avoid duplicate IDs in real UIs.Style the nodes you just inserted (the return value).
$("<span>new</span>")
.insertAfter("#box")
.css("font-weight", "bold");span is built..insertAfter("#box") places it..css() updates that returned set.Check these before moving nodes around the tree.
One target moves; many targets clone. Duplicate id values on clones break uniqueness.
Need per-target dynamic markup? Use .after(fn) instead.
Do not build markup from URL params, cookies, or form fields without escaping.
Using jQuery DOM insert methods on SVG may behave unexpectedly unless a method documents SVG support.
.insertAfter() has been part of jQuery since 1.0. Return-set behavior for single-target inserts was clarified in 1.9 for reliable .end() chaining.
Supported in all browsers that run jQuery 1.0+. Prefer a current jQuery 3.x build for modern projects.
Bottom line: Everyday sibling insert. Prefer content-first when you already hold the node to place.
| Approach | Cost | Best for |
|---|---|---|
| One target | Cheap move | Relocating a known node |
| Many targets | Clone + insert | Small lists of anchors |
| Huge multi-target sets | Expensive | Batch or use DocumentFragment patterns |
Cloning across dozens of targets multiplies work. Prefer one container update when you can.
.after().One line: .insertAfter() is content-first sibling insertion after a target — same result as .after() with flipped arguments.
Insert matched elements before a target with the same content-first style.
8 people found this page helpful