The jQuery .html() method has a dual role. You can retrieve what the current HTML is for the first matched element. You can also use it to populate the first matched element with HTML and replace whatever is currently contained in the element. It is often used to take information from one place to add it to somewhere else, or to run comparisons or to see if some condition is true. 

Note that the .html() will only be applied to the fist element is the set of matched elements, so if you have 4 tags <h2 class="subTitle"> it will only do its work with the first one it finds in the document. 

Also note that it does replace whatever HTML is contained in the element - so you will lose what is currently in there if you have content in the parentheses for the parameter. If this is not your intent, consider the .append() or .prepend() methods.

By HTML,  we mean whatever is inside that element. If it is a <div> with other tags, <h2>, <p>, <img>, etc., it will see all of that as the HTML.


Example of using .html()

An example would be to have a list of options for someone to choose from, say for a quiz. The options could each contain HTML content that you would then retrieve and compare against the correct answer. If true, the score would be increased.

var score = 0;
$("h3 span").html(score);
    var correctAnswer = $("p.question").attr("alt");
    var userAnswer = $(this).html();
    if (userAnswer == correctAnswer) {
        score = score + 1;
        $("h3 span").html(score);
        $("").css("color","#447700" );
    } else {
        $("").css("color","#880000" );

In the above example we are using the .html() method in several locations. We are using it to have the current score shown and updated if the answer is correct. We are using it to get the HTML for the clicked on answer. We are also using it to provide the correct feedback for the question.

The HTML for this quiz question:

<p class="question" alt="giraffe">Which animal has the longest neck?</p>
<p class="qAnswer">giraffe</p>
<p class="qAnswer">zebra</p>
<p class="qAnswer">hippopotamus</p>
<p class="qAnswer">mouse</p>
<h3>Score: <span></span></h3>
<h3 class="feedback"></h3>

Below is the quiz. Click on the correct answer to see what all happens. Click on "TRY AGAIN" then test it with a wrong answer to see what all happens: