jQuery .after() Method

What You’ll Learn

The .after() method inserts content immediately after each matched element as a sibling. This tutorial covers HTML strings, text nodes, DOM elements, jQuery objects, multiple arguments, and the callback form since 1.4, comparisons with .before(), .insertAfter(), and .append(), the official jQuery demos, and five practical try-it examples.

Introduction

Form disclaimers, horizontal rules, helper text, and follow-up panels often need to appear right below an existing element — not inside it. When content should sit as the next sibling after a matched node, jQuery provides .after().

Available since jQuery 1.0, .after() is the mirror of .before(). Where .before() inserts content above the element, .after() inserts it below. You can pass HTML strings, text nodes, DOM elements, jQuery objects, multiple arguments, or a callback function (since 1.4).

.after() and .insertAfter() perform the same task with reversed syntax. Use .append() when content belongs inside the element. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .after() Method

.after( content [, content ] ) inserts content immediately after each matched element in the DOM tree. The matched element itself is unchanged; new nodes appear as its following siblings. The return value is the same jQuery collection (for chaining).

When inserting an element already in the document after a single target, jQuery moves it rather than copying it. Since jQuery 1.4, the callback form .after( function( index ) ) runs once per matched element; return content to insert after that element.

📝 Syntax

jQuery .after() supports three forms:

Insert after — since 1.0

.after( content [, content ] )

• content — HTML string, DOM element, text node, array, or jQuery object.
• Multiple arguments are inserted in order after each matched element.

Insert with callback — since 1.4

.after( function( index [, html ] ) {
  // return content to insert; `this` is the current element
} )

Official after patterns

$( "p" ).after( " Hello " );

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover the callback form and multiple-argument insertion from the docs. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).after( " Hello " );

Before: <p>I would like to say:</p>
After:  <p>I would like to say:</p> Hello

" Hello " appears as sibling after each <p> — not inside it

$( "p" ).after( document.createTextNode( "Hello" ) );

Text node "Hello" inserted after each paragraph
No HTML parsing — safer for plain text

Official jQuery Example 2 pattern

$( "p" ).after( $( "b" ) );

// <b>Hello</b> moves to follow each <p>
// (cloned for all but last target if multiple matches)

<b> removed from original location
Inserted as sibling after matched <p> elements

Single target → element moves (not cloned)

$( "p" ).after( function() {
  return "<b>" + this.className + "</b>";
});

Each <p> gets a <b> sibling showing its className
Callback runs once per matched element
<b> appears after the paragraph, not inside it

var $newdiv1 = $( "<div class='note'>Note</div>" ),
    newdiv2 = document.createElement( "div" ),
    existingdiv1 = document.getElementById( "foo" );

newdiv2.textContent = "Created with createElement";

$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );

Three nodes inserted after first <p> in order:
  1. jQuery div.note
  2. createElement div
  3. existing #foo element (moved)

Equivalent to .after(a, b, c) with separate arguments

🚀 Common Use Cases

• Form disclaimers — insert legal text or helper notes immediately after a form section.
• Horizontal rules — add <hr> separators after content blocks.
• Error messages — show validation feedback as a sibling below the invalid field wrapper.
• Read-more links — append a “Continue reading” link after article excerpts.
• Relocate elements — move an existing banner or widget to follow a heading.
• Dynamic labels — use the callback form to insert badges showing each element’s class name.

📝 Notes

• Available since jQuery 1.0 — callback form added in jQuery 1.4.
• Inserts as the next sibling; use .before() for the previous sibling.
• Matched elements are unchanged — content goes outside, not inside.
• Inserting after a single target moves existing nodes; multiple targets clone except last.
• Do not pass HTML strings from untrusted user input — XSS risk.
• .append() inserts inside as last child; .after() inserts as sibling below.
• Since jQuery 1.9, .after() always returns the original matched set.
• Multiple arguments supported: .after(a, b, c).

💡 Best Practices