jQuery DOM Methods

Beginner
8 min read
Updated: Nov 2026
29 method guides
Method index
jQuery DOM methods index — .append, .html, .detach, .wrap, and more
Index

About This Index

This page is the jQuery DOM index for the tutorial track. Each row links to a full guide with syntax, examples, and FAQs.

Learn the jQuery overview on /jquery. Use this page when you need a DOM API such as .append(), .html(), or .detach().

Beginner path.

Start with .append() and .html(), then .text() and .remove()—learn .detach() when you need to stash nodes and put them back later.

Syntax

How to Call a DOM Method

Insert, rewrite content, or remove nodes from a jQuery collection:

jQuery
$("#list").append("
  • Item
    • ");
$("
  • First
    • ").prependTo("#list");
$("#panel").html("
    Hello
    ");
$("#panel").text("Plain text only");

var stash = $("#card").detach();
stash.appendTo("#shelf");

$("#old").replaceWith("
    ");
$("p").wrap("
    ");
    Browse

    jQuery DOM Methods Table

    All DOM method guides in this jQuery tutorial series (29 tutorials).

    Insert Content

    13 methods

    Add, move, and rearrange nodes — append, prepend, siblings, and replace.

    MethodDescriptionTutorial
    .append()Insert content as the last child of each matched element.Try it
    .appendTo()Insert matched elements at the end of a target — reversed .append().Try it
    .prepend()Insert content as the first child of each matched element.Try it
    .prependTo()Insert matched elements at the start of a target — reversed .prepend().Try it
    .after()Insert content immediately after each matched element as a sibling.Try it
    .before()Insert content immediately before each matched element as a sibling.Try it
    .insertAfter()Insert matched elements after a target — reversed .after().Try it
    .insertBefore()Insert matched elements before a target — reversed .before().Try it
    .html()Get or set HTML contents — getter reads the first match; setter replaces children.Try it
    .text()Get or set plain text contents — safer than .html() for user strings.Try it
    .replaceWith()Replace matched elements with new content and return the removed set.Try it
    .replaceAll()Replace target elements with matched elements — reversed .replaceWith().Try it
    .clone()Create a deep copy of matched elements — optionally with data and events.Try it

    Wrap & Unwrap

    4 methods

    Add or strip parent wrappers around matched elements.

    MethodDescriptionTutorial
    .wrap()Wrap an HTML structure around each matched element.Try it
    .wrapAll()Wrap all matched elements together in a single parent container.Try it
    .wrapInner()Wrap the contents inside each matched element.Try it
    .unwrap()Remove the immediate parent and leave matched elements in place.Try it

    Remove & Preserve

    3 methods

    Take elements out of the document — detach for temporary removal, remove for permanent.

    MethodDescriptionTutorial
    .detach()Remove from the DOM but keep jQuery data and event handlers for reinsertion.Try it
    .empty()Remove all child nodes while keeping the parent element.Try it
    .remove()Remove matched elements permanently and clean up jQuery data/events.Try it

    Element Data

    3 methods

    Store, check, and clear arbitrary JavaScript data on DOM elements.

    MethodDescriptionTutorial
    .data()Store and read arbitrary values on elements — keys, objects, or data-* seeding.Try it
    .removeData()Remove values from jQuery's internal data cache.Try it
    $.hasData()Return true if an element has jQuery data or event handlers cached.Try it

    Visibility

    3 methods

    Show, hide, and toggle element visibility (also covered under Effects).

    MethodDescriptionTutorial
    .show()Display matched elements instantly or with animation.Try it
    .hide()Hide matched elements instantly or with animation.Try it
    .toggle()Flip visibility — show if hidden, hide if visible (optional force boolean).Try it

    Document Ready

    1 method

    Promise-style DOM ready via the $.ready thenable.

    MethodDescriptionTutorial
    $.readyThenable that resolves when the DOM is ready — combine with $.when().Try it

    Collection Helpers

    2 methods

    Inspect or convert the jQuery collection itself.

    MethodDescriptionTutorial
    .toArray()Convert the jQuery collection into a native DOM element array.Try it
    .size()Deprecated alias for .length — prefer .length on the collection.Try it

    Frequently Asked Questions

    They change the document tree: insert with .append() / .prepend(), set content with .html() / .text(), wrap or clone nodes, and remove with .detach(), .empty(), or .remove().
    Use .detach() for temporary removal when you will reinsert the same nodes (data and event handlers stay). Use .remove() for permanent deletion and cleanup.
    .html() reads and writes markup (innerHTML). .text() works with plain text only—prefer it when inserting untrusted strings to avoid HTML injection.
    Same insertion, different order: $('#box').append(content) vs $(content).appendTo('#box'). Pick the form that reads more clearly with your chain.
    Start with .append() and .html(), then .text() and .remove(). Learn .detach() when you need to stash nodes and put them back later.

    Start with .append()

    Open the insert guide—syntax, examples, and FAQs.

    .append() tutorial →

    About the author

    Mari Selvan M P
    Mari Selvan M P 🔗

    Developer, cloud engineer, and technical writer

    • Experience 12 years building web and cloud systems
    • Focus Full Stack Development, AWS, and Developer Education

    I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

    AWS Certified Developer – Associate (Credly)

    16 people found this page helpful

    jQuery .removeProp() Method jQuery .append() Method