jQuery DOM Insertion

jQuery offers a rich set of insertion methods that cover every position relative to an element: before it, after it, at the start of its content, and at the end of its content. Understanding the difference between the two method families — target-centric and content-centric — helps you write more readable code.

Content-Centric Methods

These methods are called on the content you want to insert: .appendTo(target), .prependTo(target), .insertBefore(target), .insertAfter(target). The subject is the new content, and the argument is where it goes.

Target-Centric Methods

These are called on the container: .append(content), .prepend(content), .before(content), .after(content). The subject is the destination element, and the argument is what to insert.

.append() — insert at end of element's children
.prepend() — insert at beginning of element's children
.after() — insert after the element in the DOM
.before() — insert before the element in the DOM

You can pass HTML strings, jQuery objects, or DOM nodes to all insertion methods. Passing an existing DOM element moves it rather than cloning it.

Example

// Append new HTML to a list
$('#todo-list').append('<li>Buy groceries</li>');

// Prepend a heading inside a section
$('section').prepend('<h2>Introduction</h2>');

// Insert a divider after a specific element
$('#intro').after('<hr class="divider">');

// Move an existing element (no clone needed)
var $footer = $('footer').detach();
$('#wrapper').append($footer);

// Content-centric style
$('<p>New paragraph</p>').appendTo('#container');

JAVASCRIPT

Full Editor

Pro Tip

Use .detach() instead of .remove() when you plan to reinsert the element later — it preserves event handlers.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned