jQuery html()

jQuery html() method is used to change the entire content of the selected elements. It replaces the selected element content with new contents.

Note: It is a very useful function but works in a limited area because of its API documentation. The API documentation of the jQuery html function consists of three method signatures.

The first method signature has no argument, so it just returns the HTML within that element. The remaining two signatures take a single argument: i.e. a string or a function that returns a string.

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

It is used to set content by calling function.
The jQuery html() method is used either for set the content or return the content of the selected elements.

To set content:

When you use this method to set content, it overwrites the content of the all matched elements.

To return content:

When you use this method to return content, it returns the content of the first matched element.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("Hello <b>MKtutorial.in</b>");
});
});
</script>
</head>
<body>
<button>Click here to change the content of all p elements</button> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

jQuery text()

The jQuery text() method is used to set or return the text content of the selected elements.

To return content: When this method is used to return content, it returns the combined text content of all matched elements without the HTML markup.

To set content: When this method is used to set content, it overwrites the content of all matched elements.

Difference between jQuery text() method and jQuery html() method

The jQuery text() method is used to set or return html content without HTML markup while, html() method is used to set or return the innerHtml (text + HTML markup).
The jQuery text() method can be used in both XML and HTML document while jQuery html() method can't.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Welcome to MKtutorial.in!");
});
});
</script>
</head>
<body>
<button>Click here to set text content for all p elements</button>
<p>Hello Guys!</p>
<p>Looking for online training....</p>
</body>
</html>

jQuery val()

There are two usage of jQuery val() method.

It is used to get current value of the first element in the set of matched elements.
It is used to set the value of every matched element.

<html lang="en">
<head>
<title>val demo</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p> </p>
<select id="single">
<option>Single</option>
<option>Double</option>
<option>Triple</option>
</select>
<script>
function displayVals() {
var singleValues = $( "#single" ).val();
$( "p" ).html( "<b>Value:</b> " + singleValues);
}
$( "select" ).change( displayVals );
displayVals();
</script>
</body>
</html>