jQuery .append() Method

What Is .append()?

.append(content) inserts content as the last child of each matched element (since jQuery 1.0). Use .prepend() for the first child.

$("#list").append("<li>New</li>")   // container first
$("<li>New</li>").appendTo("#list")   // content first (same result)

$("p").append(" Hello ")              // HTML / text
$("p").append(document.createTextNode("Hi"))
$(".box").append($("#widget"))        // move existing node

How to Use .append()

Select the container, then pass what to insert at the end.

1. Select the target element(s) that should receive new content.
2. Call .append(content) with HTML, a node, a jQuery object, or a callback.
3. Content becomes the last child of each match — existing children stay.
4. Chain further methods on the same collection if needed.

Pseudocode

for each matched element el:
    if content is a function:
        piece = content(index, el.innerHTML)   // this = el
    else:
        piece = content

    insert piece as last child of el

    // existing DOM node + one target  → move (not clone)
    // existing DOM node + many targets → clone for all but last

return original matched set

Cheat Sheet

Keep these facts handy while inserting content.

Live Preview

Append into <p id="say">I would like to say:</p> and watch the last-child insert.

$("#say").append(" Hello ")
→ I would like to say: Hello 

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

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

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

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

Text node "Hello" appended
No HTML tags are interpreted

$("p").append($("strong"));
// <strong> leaves its old parent and lands inside <p>

<strong> removed from original location
Appended as last child of matched <p>
One target → move; many targets → clone extras

$(".item").append(function (index) {
  return " #" + (index + 1);
});

Alpha #1
Beta #2
Gamma #3

Performance Notes

For large lists, build a string or DocumentFragment, then append once. Avoid appending inside a tight loop when hundreds of nodes are involved.

Key Takeaways