jQuery contents() method

The contents() method in jQuery is used to return the direct children, including the comment nodes and text of the matched element. The contents() method works similar to the jQuery children() method, except that the content() method also returns the comment nodes and text.

We can also use the contents() method to get the content document of an iframe if it is in the same domain as the main page.

Syntax

This method does not accept any arguments.

Let's see an illustration to understand the use of the contents() method.

Example

It is a simple example of using the contents() method. In this example, we are using the contents() method to get the content of the div element. The contents() method will return the content of the elements inside the div element. On clicking the given button, an alert box will be displayed showing the content of the elements of the div element.

To get the content of the specific child of the div element, we can use the filter() method to filter the children.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("div").contents().text());
  });
});
</script>
<style>
div{
border: 2px solid blue;
}
</style>
</head>
<body>
<h3> It is an example of using the contents() method. </h3>

<div>
<b> This is a div element. </b>
</br> </br>
<span> Hello world :) :) </span>
<span> Welcome to the javaTpoint.com </span>

<p> This is a paragraph inside div </p>
 </div>

<p> On clicking on the given button, an alert box will be displayed showing the text inside the above div element. </p>

<p> Click the below button to see the effect. </p>

<button> Click me </button>

</body>
</html>

Test it Now

Output

After the execution, we will get the following output -