jQuery html() Method

The html() method in jQuery is used to get or set the HTML contents (markup) of the selected element(s).

When we use this method to get the text content, it returns the content of the first matched element.

When used to set the text content, it modifies or overwrites the content of all the matched elements.

To manipulate only the text content of selected elements, we use the text() method.

Syntax

We have different syntaxes to set and return the content (innerHTML), we are describing them below −

Following is the syntax of html() method in jQuery to return the content:

$(selector).html()

This is the syntax to set the content:

$(selector).html(content)

Below is the syntax to set the content using a function:

$(selector).html(function(index,currentcontent))

Parameters

This method accepts the following parameters −

content: Specifies content to set for the selected elements (It can contain HTML tags).
function (index,currentcontent): A function that will be executed for each element matched by the selector.

index: The index position of the current element within the matched set of elements.
currentcontent: The current text content of the element being processed.

Example 1

In the following example, we are using the html() method to set the content for all the paragraph elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").html("<h3>New element has been added!</h3>");
    })
  });
</script>
</head>
<body>
<p>Paragraph element 1.</p>
<p>Paragraph element 2.</p>
<button>Click</button>
</body>
</html>

When we execute and click the button, it sets the provided HTML element (<h3>) for all the <p> elements in DOM.

Example 2

Here, we return the text content of the selected element. In our case, the selected element is the content inside the <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
   alert($("div").html());
  });
});
</script>
</head>
<body>
  <div>
     <p>Paragraph element.</p>
  </div>
<button>Click</button>
</body>
</html>

After clicking the button, it returns the content inside the <div> element (i.e <p> element).

Example 3

Here, we are using a function to set the content of the selected elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").html(function(index){
        return "Index of this paragraph element is: " + index;
      });
    })
  });
</script>
</head>
<body>
<p>Paragraph element 1.</p>
<p>Paragraph element 2.</p>
<p>Paragraph element 3.</p>
<button>Click</button>
</body>
</html>

When we execute and click the button, it sets the provided text content for all the <p> elements in DOM and returns its index value.

jquery_ref_html.htm

Print Page