jQuery jQuery.contains() Method

What You’ll Learn

The jQuery.contains() utility returns true when one DOM element is a descendant of another — direct child or nested deeper. This tutorial covers syntax, official document examples, nested trees, jQuery unwrap patterns, click-outside guards, and comparisons with native contains and .find().

Introduction

When you build interactive pages, you often need to know whether one element lives inside another. Dropdown menus close when you click outside them. Drag-and-drop validates that items stay within a container. Event handlers check whether the click target belongs to a panel.

jQuery provides jQuery.contains() (also written $.contains()) for exactly that: a fast boolean test between two DOM nodes. It answers “Is contained a descendant of container?” without searching the whole tree with selectors.

Understanding the jQuery.contains() Method

jQuery.contains(container, contained) returns true when contained is inside container in the DOM hierarchy — child, grandchild, or any deeper nested element.

It returns false when the nodes are the same element, siblings, unrelated branches, or when contained is actually an ancestor of container. Argument order matters: parent first, potential descendant second.

📝 Syntax

General form of jQuery.contains:

jQuery.contains( container, contained )

// or

$.contains( container, contained )

Parameters

• container — the DOM element that may contain the other node.
• contained — the DOM element that may be a descendant.

Return value

• true if contained is a descendant of container.
• false otherwise — including reversed order and non-element nodes.

Minimal workflow

var panel = document.getElementById("panel");

var target = event.target;



if ($.contains(panel, target)) {

  // click happened inside panel

}

Examples Gallery

Each example uses $.contains() with jQuery 3.7.1. Open DevTools or use the Try-it links to run them interactively.

console.log(

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

); // true



console.log(

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

); // false

true

false

var box = document.getElementById("box");

var item = document.getElementById("item");

var label = document.getElementById("label");



console.log($.contains(box, item));  // true — direct child

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

true

true

var boxA = document.getElementById("box-a");

var boxB = document.getElementById("box-b");



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

console.log($.contains(boxA, boxA)); // false — same node

false

false

var $menu = $("#menu");

var $link = $("#menu-link");



// Correct — unwrap with [0] or .get(0)

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



// Wrong — jQuery objects are not DOM elements

console.log($.contains($menu, $link)); // false (unexpected)

true

false

var menuEl = document.getElementById("dropdown");



$(document).on("click", function (event) {

  var inside = $.contains(menuEl, event.target);

  if (!inside) {

    $("#dropdown").removeClass("open");

  }

});



// Click inside keeps open; click outside removes "open"

Click inside → stays open

Click outside → closes

🚀 Common Use Cases

• Click outside to close — menus, modals, tooltips.
• Drop zone validation — confirm dragged nodes stay in container.
• Event target checks — ignore clicks outside a panel.
• Plugin boundaries — verify nodes belong to widget root.
• Focus trap helpers — test whether active element is inside dialog.
• Editor overlays — decide if selection is within editable region.

📝 Notes

• Available since jQuery 1.4 — still supported in jQuery 3.7.x.
• First argument must be a DOM element — not a jQuery object or plain object.
• Second argument must be an element node — text/comment nodes return false.
• Argument order is (container, contained) — reversing them changes the result.
• Modern browsers also expose native Node.contains() — jQuery’s version is stricter on node types.
• Related: .find(), .has(), .closest(), event.target.

💡 Best Practices