jQuery contains() Method

What Is contains()?

jQuery.contains(container, contained) (alias $.contains) returns true when contained is a descendant of container — direct child or nested deeper (since jQuery 1.4).

$.contains(container, contained)  → true | false

$.contains(document.documentElement, document.body)  // true
$.contains(document.body, document.documentElement)  // false

// Unwrap jQuery collections:
$.contains($("#box")[0], $("#item")[0])

How to Use contains()

Get two element nodes, then ask if the second lives inside the first.

1. Pick the container element (ancestor candidate).
2. Pick the contained element (possible descendant).
3. If you have jQuery objects, unwrap with [0].
4. Call $.contains(container, contained) and branch on true / false.

Pseudocode

function contains(container, contained):
    if contained is not an element node:
        return false
    // walk ancestors of contained (or use native check)
    return contained is inside container (not equal to container)

// Official demo:
$.contains(document.documentElement, document.body)  → true
$.contains(document.body, document.documentElement)  → false

Cheat Sheet

Keep these facts handy while testing DOM ancestry.

Live Preview

Pick a container and a target from a small tree, then run $.contains().

$.contains(document.documentElement, document.body)
→ true

jQuery Examples

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

console.log($.contains(document.documentElement, document.body)); // true
console.log($.contains(document.body, document.documentElement)); // false

true
false

// <div id="box"><div id="item"><span id="label">Hi</span></div></div>
var box = document.getElementById("box");
var item = document.getElementById("item");
var label = document.getElementById("label");

console.log($.contains(box, item));   // true
console.log($.contains(box, label));  // true

true
true

// <div id="box-a">A</div><div id="box-b">B</div>
var boxA = document.getElementById("box-a");
var boxB = document.getElementById("box-b");

console.log($.contains(boxA, boxB));  // false
console.log($.contains(boxA, boxA));  // false

false
false

// <nav id="menu"><a id="menu-link" href="#">Link</a></nav>
var $menu = $("#menu");
var $link = $("#menu-link");

console.log($.contains($menu[0], $link[0]));  // true

true

Performance Notes

Prefer $.contains when both nodes are already known — it is a targeted ancestry check, not a full selector scan.

Key Takeaways