jQuery DOM
What You’ll Learn
DOM methods change the document tree. .detach() removes elements from the page while keeping jQuery event handlers and .data() so you can reinsert them later — unlike .remove(), which cleans up jQuery state permanently.
.detach()
Remove & keep
Events
Preserved
.data()
Preserved
Reinsert
.appendTo()
vs .remove()
Permanent
29 guides
Full index
Introduction
Sometimes you need to take elements off the page temporarily — hide a tab panel, stash a widget during a layout change, or batch DOM updates without destroying user interactions. jQuery’s .detach() removes matched elements from the document while preserving everything jQuery attached to them.
What Are jQuery DOM Methods?
DOM manipulation methods insert, remove, clone, and replace nodes in the tree. .detach() is the “remove but remember” API — introduced in jQuery 1.4. It returns the same jQuery collection, now disconnected from the document, ready for .appendTo() when you need the nodes back.
Use .detach() to remove matched elements from the DOM without destroying jQuery event handlers or .data() cache. Store the returned jQuery object and reinsert with .appendTo() or .prependTo(). Use .remove() when you will never need the nodes again.
📝 Syntax
Minimal detach workflow:
// Detach — keep events and data
var stash = $("#panel").detach();
// Reinsert later
stash.appendTo("#container");
// Permanent removal — use .remove() instead
$("#temp").remove();👀 .detach() vs .remove() vs .empty() vs .appendTo()
Four related APIs — pick the right removal or reinsertion:
DOM Method Tutorial Index
Search by method name or browse by category. Each tutorial includes syntax, try-it examples, and FAQs.
Remove & Preserve
3 tutorialsTake elements out of the document without destroying jQuery state — detach for temporary removal, compare with .remove() and .empty().
| Method | Description | Tutorial |
|---|---|---|
.detach() | Remove matched elements from the DOM while keeping jQuery data and event handlers — reinsert later with .appendTo() or .prependTo(). | Open |
.empty() | Remove all child nodes from matched elements while keeping the parent in the DOM — jQuery cleans up child data and event handlers. | Open |
.remove() | Remove matched elements from the DOM permanently — optional selector filter, jQuery data and event handlers are cleaned up. | Open |
Wrap & Unwrap
4 tutorialsAdd or strip parent wrappers around matched elements — wrap adds a parent, unwrap removes it.
| Method | Description | Tutorial |
|---|---|---|
.wrap() | Wrap an HTML structure around each matched element — selector, HTML string, DOM node, jQuery object, or callback since 1.4. | Open |
.wrapAll() | Wrap all matched elements together in a single parent container — one shared wrapper for the entire collection since 1.2. | Open |
.wrapInner() | Wrap the contents inside each matched element — outer tag stays, inner wrapper groups all child nodes since 1.2. | Open |
.unwrap() | Remove the immediate parent of matched elements and leave the children in place — inverse of .wrap(), optional parent selector since jQuery 3.0. | Open |
Insert Content
12 tutorialsAdd, replace, and rearrange DOM nodes — append, prepend, insert siblings, replaceAll, and replaceWith.
| Method | Description | Tutorial |
|---|---|---|
.append() | Insert content as the last child of each matched element — HTML strings, DOM nodes, jQuery objects, or a callback function since 1.4. | Open |
.prepend() | Insert content as the first child of each matched element — HTML strings, DOM nodes, jQuery objects, or a callback function since 1.4. | Open |
.appendTo() | Insert matched elements at the end of a target container — reversed syntax of .append(), ideal for detach-and-reinsert workflows. | Open |
.html() | Get or set the HTML contents of matched elements — read innerHTML from the first match, replace all children when setting, callback form since 1.4. | Open |
.prependTo() | Insert matched elements at the beginning of a target container — reversed syntax of .prepend(), ideal for newest-first feeds and detach reinsertion. | Open |
.text() | Get or set plain text contents of matched elements — safe alternative to html(), works in XML documents, callback form since 1.4. | Open |
.after() | Insert content immediately after each matched element as a sibling — HTML strings, DOM nodes, jQuery objects, multiple arguments, or callback since 1.4. | Open |
.before() | Insert content immediately before each matched element as a sibling — HTML strings, DOM nodes, jQuery objects, multiple arguments, or callback since 1.4. | Open |
.insertAfter() | Insert matched elements after a target as siblings — reversed syntax of .after(), content-first insertion since 1.0. | Open |
.insertBefore() | Insert matched elements before a target as siblings — reversed syntax of .before(), content-first insertion since 1.0. | Open |
.replaceAll() | Replace target elements with matched elements — content-first reversed syntax of .replaceWith(), moves or clones replacement nodes since 1.2. | Open |
.replaceWith() | Replace matched elements with new content — target-first syntax, HTML string, DOM node, jQuery object, or callback since 1.4, returns removed set since 1.2. | Open |
Element Data
3 tutorialsCheck, store, and clear arbitrary JavaScript data on DOM elements — jQuery.hasData() for read-only checks, .data() for storage, .removeData() for cleanup.
| Method | Description | Tutorial |
|---|---|---|
jQuery.hasData() | Check whether a DOM element has jQuery internal data without creating a cache entry — read-only Boolean since 1.5, event handlers count. | Open |
.data() | Store and read arbitrary values on matched elements — key/value, object merge, HTML5 data-* seeding, typed conversion, and full cache dump. | Open |
.removeData() | Remove values from jQuery's internal data cache — delete one key, bulk keys since 1.7, or clear all cached data on matched elements. | Open |
Document Ready
1 tutorialPromise-style DOM ready via the jQuery.ready thenable — see Core for .ready() and holdReady.
| Method | Description | Tutorial |
|---|---|---|
jQuery.ready | Thenable that resolves when the DOM is ready — combine with jQuery.when and Ajax since 1.8, Promise.resolve since 3.0, powers .ready() callbacks. | Open |
Visibility & Effects
3 tutorialsShow, hide, and flip element visibility with optional animation — .toggle() combines show and hide in one call.
| Method | Description | Tutorial |
|---|---|---|
.hide() | Hide matched elements instantly or with animation — saves original display for .show(), supports slow, fast, duration, easing, and complete callbacks since 1.0. | Open |
.show() | Display matched elements instantly or with animation — restores saved display from .hide(), supports slow, fast, duration, easing, and complete callbacks since 1.0. | Open |
.toggle() | Flip visibility on matched elements — show if hidden, hide if visible, optional Boolean force since 1.3, animated slow/fast durations and callbacks since 1.0. | Open |
More Methods
3 tutorialsAdditional jQuery DOM manipulation methods — search or browse alphabetically.
Conclusion
jQuery DOM methods let you reshape the document tree without losing state. Start with .detach() when you need temporary removal — tabs, staged widgets, or batch updates — and .remove() when nodes should be gone for good.
❓ Frequently Asked Questions
Next: jQuery .detach() Method
Remove elements from the DOM while preserving event handlers and jQuery data.
About the author
6 people found this page helpful