Updated April 20, 2023
Description to jQuery contents
The jQuery contents() function is used to gets the immediate children of each element in the matched set, including comment and text nodes. The jQuery contents() function is a built-in function in jQuery. The jQuery contents() function search through the DOM tree for the immediate children of these elements and create a new jQuery object. This function is performed similarly to the children() function, except it includes the comment and text HTML elements in the resulting new jQuery object. It also returns a content document of an iframe, if an iframe is in the same domain.
Syntax:
$(selector).contents();Parameters:
It does not take any parameters.
- Return value – The return value of this function is all the immediate children’s HTML elements of the selector.
Working of the jQuery contents() Function
The JQuery contents() function accepts no parameter. Suppose we have a div element in the HTML page that contains some child elements. Now we need to get all the children of the div elements, so we can use the contents() function as “$( “div” ).contents()”, which return all the children of the div elements with contents.
Examples
Example of jQuery contents() function to show the working of the contents() function –
Example #1
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery contents() function </title>
<script>
function disp()
{
var content = $( "div" ).contents().text();
alert( content );
}
</script>
</head>
<body>
<h3> This an example of contents() function: </h3>
<div>
<h2> The List of Vegetables are : </h2>
<ol>
<li> Corn </li>
<li> Mushroom </li>
<li> Broccoli </li>
<li> Cucumber </li>
</ol>
</div>
<div>
<h2> The List of Fruits are : </h2>
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li> Pome </li>
</ol>
</div>
<button onclick = "disp()"> Get div childrens </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there are div elements that have “h2”, “ol”, and “li” as the children elements. Next the contents() function is used to get the children of the div elements as “$(“div”).contents().text();”, that return “h2”, “ol” and “li” elements which display by using the text() function and display in the alert, once we click on the button.
Example of jQuery contents() function to the working of contents() function along with the filter() function –
Example #2
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery contents() function </title>
<style>
p {
color : blue;
}
</style>
</head>
<body>
<h3> This an example of contents() function: </h3>
<p> This is an example of paragraph. <b> This is an example of bold text. </b>
</p>
<br>
<button onclick = "disp()" style = "background-color : yellow" > Get p childrens</button>
<script>
function disp()
{
$( "p" )
.contents()
.filter(function(){
return this.nodeType !== 2;
})
.wrap( "<b> </b>" );
}
</script>
</body>
</html>An output of the above code is –
Once we click on the “Get p children” button, the output is –
In the above code, there is a “p” elements that have “b” as the child element. Next, the contents() function is used to get the child of the “p” element and apply the bold style to “p” element and the child element by using the filter() and wrap() function, which executes once we click on the button, as we can see in the above output.
Example of jQuery grep() function to get the contents of the iframe –
Example #3
First, we create an iframe.html file to give the contents for the iframe in the main HTML page.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery contents() function </title>
<style>
p {
color: blue;
}
</style>
</head>
</head>
<body>
<p> "hello!, This is the iframe contents. </p>
</body>
</html>Next, we create the main HTML page file.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery contents() function </title>
<style>
p {
color: blue;
}
</style>
</head>
<script>
function disp( )
{
var content = $( "iframe" ).contents().text( );
alert( content );
}
</script>
</head>
<body>
<h3> This an example of contents() function: </h3>
<iframe src = "iframe.html" width = "300" height = "100" title = "Iframe Example" > Hello this is iframe contents</iframe>
<br>
<button onclick = "disp()" style = "background-color : yellow" > Get iframe childrens </button>
</body>
</html>An output of the above code is –
Once we click on the “Get p children” button, the output is –
In the above code first, the HTML file is created to include the contents in the iframe. Next, create the main page HTML file, so there is an iframe element that has some content. The contents() function is used to get the child of the iframe element as $(“iframe”).contents().text();”, that returns elements which display by using the text() function and display in the alert, once we click on the button.
Conclusion
The jQuery contents() function is a built-in function, which is used to gets the immediate children of each element in the matched set, including comment and text nodes.
Recommended Articles
This is a guide to jQuery contents. Here we discuss the description, Working of the jQuery contents() Function examples with code implementation respectively. You may also have a look at the following articles to learn more –
