.after()?.after(content) inserts content immediately after each matched element as a sibling (since jQuery 1.0). It returns the original jQuery set for chaining.
$(target).after(content)
$(target).after("<b>Hi</b>")
$(target).after(domNode)
$(target).after($other)
// Sibling AFTER target — not inside it
// Same job as insertAfter, reversed syntax| Need | Use |
|---|---|
| Sibling after target | $(target).after(content) |
| Content-first syntax | $(content).insertAfter(target) |
| Sibling before target | $(target).before(content) |
| Child inside target | $(target).append(content) |
.after()Select the anchor element(s), then pass what should appear right after them.
$("p"), $(".item"), etc..after(content) with HTML, a node, a jQuery object, or several arguments.| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Anchor elements (must have a parent) |
content | Yes* | HTML / node / array / jQuery object |
function(index[, html]) | Alt | Per-element content (1.4 / 1.10+) |
| Return value | — | Original jQuery set (1.9+ always) |
function after(elements, content):
for each element in elements:
if element has no parent: skip
node = build(content) // or clone for extra targets
insert node as next sibling after element
return original elementsKeep these facts handy while inserting siblings.
| Topic | Detail |
|---|---|
| Syntax | .after(content [, content…]) or .after(fn) |
| Since | 1.0 (callback 1.4; index+html callback 1.10) |
| Where | Next sibling (outside the element) |
| Move vs clone | Move for one target; clones for multiple |
| Disconnected node | No effect (jQuery 1.9+) |
| Returns | Original set (chainable) |
Pick a demo and insert content after the sample paragraph.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Official style: pass an HTML string as the next sibling.
$("p").after("<b>Hello</b>");
// <p>…</p><b>Hello</b>p in the document.<b> element.p.Passing a jQuery selection moves (or clones) nodes already in the DOM.
// <b>Hello</b>
// <p>I would like to say:</p>
$("p").after($("b"));
// <p>I would like to say:</p>
// <b>Hello</b> ← moved after p<b> with $("b").Since 1.4, return different content for each matched element.
$("p").after(function (index) {
return "<span> after #" + index + "</span>";
});p..after() vs .insertAfter()Same result; content and target swap places in the call.
$("p").after("<hr>");
$("<hr>").insertAfter("p");
// Both: <p>…</p><hr>$(target).after(content).$(content).insertAfter(target).Watch these when inserting siblings with .after().
HTML strings can run scripts. Treat user input as unsafe unless sanitized.
Existing nodes are cloned for every match except the last. Event handlers on moved nodes need care — use .clone(true) when you need data/events copied on purpose.
Calling .after() on a disconnected node does nothing and still returns the original set.
.append()Need content inside the element? Use append/prepend, not after/before.
.after() has shipped since jQuery 1.0 (callback form since 1.4). It works in all modern browsers with jQuery loaded. Behavior for disconnected nodes stabilized in jQuery 1.9.
Supported everywhere jQuery DOM APIs run in the browser. Insert siblings after matched elements.
Bottom line: Call $(target).after(content) for next-sibling insertion. Prefer insertAfter when content-first chaining reads better.
| Approach | Cost | Best for |
|---|---|---|
.after(html) | Parse + insert | Simple sibling inserts |
.after($nodes) | Move / clone | Reordering existing nodes |
| Many targets + clones | Higher | Batch or build a fragment first |
For lots of inserts, build a DocumentFragment (or one jQuery collection) and insert once when possible — fewer reflows than many tiny .after() calls.
insertAfter does the same job reversed.One line: $(target).after(content) adds a next sibling — outside the element, not inside it.
Insert content as the previous sibling before matched elements.
9 people found this page helpful