jQuery API

.html()

Categories: Attributes | Manipulation > DOM Insertion
Contents:

.html() Returns: String

Description: Get the HTML contents of the first element in the set of matched elements.

  • version added: 1.0.html()

This method is not available on XML documents.

In an HTML document, we can use .html() to get the contents of any element. If the selector expression matches more than one element, only the first one's HTML content is returned. Consider this code:

$('div.demo-container').html();

In order for the following <div>'s content to be retrieved, it would have to be the first one with class="demo-container" in the document:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

The result would look like this:

<div class="demo-box">Demonstration Box</div>

Example:

Click a paragraph to convert it from html to text.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:8px; font-size:20px; color:blue; 
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<p>

    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>

    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>
<script>
    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });
</script>
</body>
</html>

Demo:

.html( htmlString ) Returns: jQuery

Description: Set the HTML contents of each element in the set of matched elements.

  • version added: 1.0.html( htmlString )

    htmlStringA string of HTML to set as the content of each matched element.

  • version added: 1.4.html( function(index, html) )

    function(index, html)A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments.

The .html() method is not available in XML documents.

When we use .html() to set elements' contents, any contents that were in those elements is completely replaced by the new contents. Consider the following HTML:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

We can set the HTML contents of <div class="demo-container"> like so:

$('div.demo-container')
  .html('<p>All new content. <em>You bet!</em></p>');

That line of code will replace everything inside <div class="demo-container">:

<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>

As of jQuery 1.4, the .html() method allows us to set the HTML content by passing in a function.

$('div.demo-container').html(function() {
  var emph = '<em>' + $('p').length + ' paragraphs!</em>';
  return '<p>All new content for ' + emph + '</p>';
});

Given a document with six paragraphs, this example will set the HTML of <div class="demo-container"> to <p>All new content for <em>6 paragraphs!</em></p>.

Examples:

Example: Add some html to each div. 

<!DOCTYPE html>
<html>
<head>
  <style>

  .red { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
</body>
</html>

Demo:

Example: Add some html to each div then immediately do further manipulations to the inserted html. 

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; font-size:18px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div></div>
  <div></div>
  <div></div>
<script>

    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");

</script>
</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .html() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • pranavkaushik
    What happens to the events attached to the DOM elements which were replaced by using html(SomeContent)? Are they also removed from memory? If yes, is this also applicable on IE-6?
  • Ashish
    Is the form tag removed while setting the dom element html ?
    say x = <form id="something">...<input type="text" id="Hello"/></form>
    then some_element.html(x) is removing the form tag from the "Set" html. Any ideas ?
  • Ashish
    Well...found the issue...
    In 1.4.1, jquery keeps the DOM HTML compliant.
    So no more dynamic loading of form elements inside form elements.
    I see the rationale behind this but then it will require a bit of rework to change functionality which was built up on jQuery 1.3.2
  • there is a way to read the html content in a Xml file?
    for example:
    <entry>
    <content>
    .... html code
    </content>
    </entry>


    why the .html() is no available for xml files?
  • janbaars
    Hello,
    Can someone explain to me how to get the value(text) from div id="two".

    <div id="content" class="content">
    <div id="one" class="test">joop</div>
    <div id="two" class="test">kees</div>
    <div id="tree" class="test">gert</div>
    </div>

    I try ,
    $(this).click(function() {
    alert($(this).html());
    });
    but this is wrong.

    Thanks, Jan
  • .text() ?
  • janbaars
    I fixed it,
    Instead of ID should I use the class name.

    <script>
    $(".test").click(function () {
    var test = $(this).text();
    $("#result").text(test);
    });
    </script>
  • janbaars
    Hello Nick,

    For example, i want to receive the name (kees) when i click on the div (with id="two").
    Kees must be inserted in ().
    But this div is a child of (div id="content").
    When i click on the div (div id="content") i get joop kees gert.
    When i click on the div's with id's one,two,tree i also get joop kees gert.
    How to get only the name kees when i click at div (div id="two").?


    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery-1.4rc1.js"></script>
    </head>
    <body>


    <div id="content" class="content">

    <div id="one" class="test">joop</div>
    <div id="two" class="test">kees</div>
    <div id="tree" class="test">gert</div>
    </div>

    <script>
    $("div").click(function () {
    var test = $(this).text();
    $("#result").text(test);
    });
    </script>

    </body>
    </html>

    Thanks,

    jan
  • Dan
    $("#content div").click(function () {
    var test = $(this).text();
    $("#result").text(test);
    });
    </script>

    Worked for me.
  • Is this using innerHTML?