jQuery .append() Method

What You’ll Learn

The .append() method inserts content as the last child inside each matched element. This tutorial covers HTML strings, text nodes, DOM elements, jQuery objects, multiple arguments, and the callback form since 1.4, comparisons with .appendTo(), .prepend(), and .html(), the official jQuery demos, and five practical try-it examples.

Introduction

Dynamic pages constantly add new content — append a message to a chat log, insert a table row after a form submit, or drop a widget into a dashboard panel. When new nodes should appear at the bottom inside a container, jQuery provides .append().

Available since jQuery 1.0, .append() inserts the specified content as the last child of each matched element. You can pass an HTML string, a text node, a DOM element, a jQuery object, an array of nodes, multiple arguments, or a callback function that returns content (since 1.4).

.append() and .appendTo() perform the same task with reversed syntax — the selector before .append() is the container. Use .prepend() to insert at the top instead. Pair with .empty() before appending when replacing container contents. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .append() Method

.append( content [, content ] ) adds content inside each matched element, after any existing children. The return value is the same jQuery collection (for chaining). When you append an element already in the document to a single target, jQuery moves it rather than copying it.

Since jQuery 1.4, the callback form .append( function( index, html ) ) runs once per matched element. Return an HTML string, DOM node, or jQuery object to insert. Inside the callback, this refers to the current DOM element.

📝 Syntax

jQuery .append() supports three forms:

Append content — since 1.0

.append( content [, content ] )

• content — HTML string, DOM element, text node, array, or jQuery object.
• Multiple arguments are inserted in order as last children.

Append with callback — since 1.4

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

• index — zero-based position in the matched set.
• html — current inner HTML of the element.

Return value

• Returns the same jQuery collection that received the appended content.
• Chain further methods like .addClass() or .on().

Official append patterns

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

$( "p" ).append( $( "strong" ) );

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

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

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

Content added as last child — existing text preserved

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

Text node "Hello" appended — no HTML parsing
Safer for user-supplied plain text (still escape if needed)

Same visual result as append("Hello") for simple text

$( "p" ).append( $( "strong" ) );

// <strong>Hello world!!!</strong> moves into each <p>
// (cloned for all but last target if multiple matches)

<strong> removed from original location
Appended as last child of matched <p> elements

Single target → element moves (not cloned)

$( ".item" ).append( function( index, html ) {
  return " <span class='badge'>#" + ( index + 1 ) + "</span>";
});

Each .item gets a unique #1, #2, #3 badge appended
Callback runs once per matched element
`this` inside callback refers to the current DOM element

var fruits = [ "Apple", "Banana", "Cherry" ];
var $list = $( "#fruits" ).empty();

fruits.forEach(function( name ) {
  $list.append( $( "<li>" ).text( name ) );
});

#fruits emptied, then three <li> elements appended
Using .text() on created elements avoids XSS from data

Common pattern with Ajax JSON responses

🚀 Common Use Cases

• Chat logs — append new messages to the bottom of a conversation panel.
• Todo lists — append a new <li> when the user adds an item.
• Table rows — append <tr> elements to tbody after Ajax loads data.
• Dashboard widgets — move an existing panel into a layout container with append.
• Form fields — append cloned input groups to a dynamic form section.
• Reinsert detached nodes — stash.appendTo("#container") after .detach().

📝 Notes

• Available since jQuery 1.0 — callback form added in jQuery 1.4.
• Inserts as the last child; use .prepend() for the first child.
• Appending an existing element to one target moves it; multiple targets clone except the last.
• Multiple arguments are supported: .append(a, b, c).
• Do not append HTML strings from untrusted user input — XSS risk via script tags or event attributes.
• Prefer .text() on created elements over string concatenation for dynamic data.
• .append() adds content; .html() replaces all inner content.

💡 Best Practices