.contents()?.contents() (since jQuery 1.2) returns the direct child nodes of each matched element — including text and comment nodes. It is like .children(), but broader. Since 3.2 it also returns contents of <template> elements.
$("p").contents(); // elements + text + comments
$("p").children(); // elements only
// Official pattern — wrap non-element nodes
$("p").contents()
.filter(function () { return this.nodeType !== 1; })
.wrap("<b>");
// Same-origin iframe document
$("#frame").contents().find("a");| Need | Use |
|---|---|
| Children + text/comments | $el.contents() |
| Element children only | .children() |
| Any-depth elements | .find() |
| Filter the result | .filter() |
| Wrap matched nodes | .wrap() |
.contents()Select a parent, call .contents(), then filter by node type if needed.
$("p") or $(".container")..contents() (no arguments) for every direct child node.nodeType === 3 for text, !== 1 for non-elements..wrap(), .each(), .remove() on elements..find() inside.| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Parents whose child nodes you want |
| Arguments | None | .contents() takes no parameters |
nodeType filter | Often | Isolate text (3), comment (8), or element (1) |
| Depth | — | Always exactly one level |
call $(parents).contents()
result = empty set
for each parent in the matched set:
for each direct child node of parent:
add node to result
(element, text, or comment)
return result as a new jQuery object
optional next step:
filter by nodeType before wrap / styleKeep these facts next to .children().
| Topic | Detail |
|---|---|
| Syntax | .contents() |
| Since | jQuery 1.2 (<template> since 3.2) |
| Depth | One level only |
| Nodes | Elements + text + comments |
vs .children() | Elements only |
| nodeType | 1 = element, 3 = text, 8 = comment |
| iframe | Same-origin document access |
| DOM change? | No by itself — query only |
Compare .contents() with .children(), or wrap text nodes.
Short, copy-ready snippets. Use Try It Yourself for a live editor.
<b>Wrap non-element child nodes inside a paragraph (official demo idea).
$("p")
.contents()
.filter(function () {
return this.nodeType !== 1;
})
.wrap("<b>");p.nodeType !== 1).<b> parent.span stays as-is.Official idea: wrap text nodes in <p> and remove <br> separators.
$(".container")
.contents()
.filter(function () { return this.nodeType === 3; })
.wrap("<p>")
.end()
.filter("br")
.remove();nodeType === 3 keeps text chunks..end() then .filter("br").remove() drops breaks..contents() vs .children()Same parent — compare how many nodes each method returns.
var $box = $("#mixed");
$("#out").text(
"contents: " + $box.contents().length +
"\nchildren: " + $box.children().length
);span, more text, a p, more text.span and p..contents() when text nodes matter.nodeTypeLabel direct children as element, text, or comment.
var labels = { 1: "element", 3: "text", 8: "comment" };
var lines = [];
$("#inspect").contents().each(function () {
lines.push(labels[this.nodeType] || "other");
});
$("#out").text(lines.join(", "));.each() visits every direct child node.this.nodeType identifies the kind of node.Official idea: reach into an iframe document, then find anchors (CSS-free).
$("#frameDemo").on("load", function () {
$(this).contents().find("a").text(function (i, t) {
return "[link] " + t;
});
});.contents() returns the iframe document..find("a") selects links inside that document.Check these when .contents() looks empty or fails to style.
Calling .css() or .addClass() on text nodes is unreliable. Filter to elements, or use methods that support text nodes (like .wrap()).
Text inside a child element is not returned. Call .contents() on that child, or use .find() for element descendants.
Cross-origin iframes throw a security error. Wait for load before reading .contents().
Newlines and spaces between tags count as text nodes. Filter empty text if you only want visible content.
.contents() is a core jQuery traversing method since 1.2. It works in every browser that runs your loaded jQuery version. <template> contents are included since 3.2.
Universal across jQuery-supported browsers. iframe access still depends on same-origin policy.
Bottom line: Safe for everyday use. Filter by nodeType before styling text, and keep iframe demos same-origin.
| Approach | Cost | Best for |
|---|---|---|
$("#box").contents() | Cheap | Local parent, few child nodes |
$("p").contents() then filter | Cheap–moderate | Text-node edits across many paragraphs |
$("div").contents() page-wide | Moderate | Avoid — too broad; scope first |
Scope to a known parent. Prefer .children() when you only need elements — it skips text/comment work you do not need.
.children(): broader set — elements plus non-elements.nodeType before wrap/style on text nodes.load first.One line: .contents() is one-level children plus text/comments — filter by nodeType before most jQuery actions.
Iterate over a jQuery set with a callback for each element.
8 people found this page helpful