jQuery Set Content Using text(), html(), val() and attr()

Jquery set content methods set the content of the HTML elements. These methods when calls for the setter method of jquery, contain argument to pass inside the function. This argument changes the content of the element.

Below are the different types of jQuery set content methods with simple and useful examples.

jQuery Set Content Using text()

The text() set the inner text content of the HTML element and change inner conten by passing an argument with the function. See the below example to check how you can pass the argument and change the content.

Test it Live

<script>
$(document).ready(function(){
$("#btn-txt").click(function(){
var ptext = $("#my-para").text("This is the changed content of paragraph.");
});
});
</script>
<p>When you click the button, it will change the below given text content.</p>
<button type="button" id="btn-txt">Click me to Set Text</button>
<p id="my-para"><strong>This is a paragraph to Show jQuery set content using text method.</strong></p>

$(document).ready(function(){

$("#btn-txt").click(function(){

var ptext = $("#my-para").text("This is the changed content of paragraph.");

});

</script>

<p>When you click the button, it will change the below given text content.</p>

<button type="button" id="btn-txt">Click me to Set Text</button>

<p id="my-para"><strong>This is a paragraph to Show jQuery set content using text method.</strong></p>

Output

When you click the button, it will change the below given text content.

This is a paragraph to Show jQuery set content using text method.

The example contains the paragraph with a strong tag inside it to make text bold. When you click on the button, an alert message appears, which contains only the text and not the strong tag.

jQuery Set Content Using html()

jQuery html() set the inner HTML content of the HTML element with tag names you can as an argument. The function change the content and add the HTML content and replace the old content.

Test it Live

<script>
$(document).ready(function(){
$("#btn-html").click(function(){
var phtml = $("#my-parahtml").html("This is an HTML <strong>bold text</strong>.");
});
});
</script>
<p>When you click the button, it will change the below given html content.</p>
<button type="button" id="btn-html">Click me to Set HTML content</button>
<p id="my-parahtml"><strong>This is a paragraph to change <em>using jQuery html() method</em>.</strong></p>

$(document).ready(function(){

$("#btn-html").click(function(){

var phtml = $("#my-parahtml").html("This is an HTML <strong>bold text</strong>.");

});

</script>

<p>When you click the button, it will change the below given html content.</p>

<button type="button" id="btn-html">Click me to Set HTML content</button>

<p id="my-parahtml"><strong>This is a paragraph to change <em>using jQuery html() method</em>.</strong></p>

Output

When you click the button, it will change the below given html content.

This is a paragraph to change using jQuery html() method.

How to Set Value Using val()

jQuery val() sets the inner value of the content of the HTML element by passing the value as an argument of the function. You can get the value of the HTML element using the val() without any argument and if you want to change the value you can pass some argument with the function.

Test it Live

<script>
$(document).ready(function(){
$("#btn-val").click(function(){
var pval = $("#my-inputval").val("Jhon Cena");
});
});
</script>
<p>Select your option from the selectbox given below and click the button.</p>
<button type="button" id="btn-val">Click me to Set Value</button>
<input type="text" name="name" id="my-inputval"/>

$(document).ready(function(){

$("#btn-val").click(function(){

var pval = $("#my-inputval").val("Jhon Cena");

});

</script>

<p>Select your option from the selectbox given below and click the button.</p>

<button type="button" id="btn-val">Click me to Set Value</button>

Output

Select your option from the selectbox given below and click the button.

Set Attribute Using jQuery attr() Method

If you want to set and change the attribute content of the HTML element, you have to use jQuery attr() with come argument to pass with the function.

Suppose you have an anchor tag and you want to change the href attribute of it. You have to pass the two-argument in which the first argument is the attribute and the second argument is the value of the attribute you want to change or set.

See the below example to find out how you can set attributes.

Test it Live

<script>
$(document).ready(function(){
$("#btn-attr").click(function(){
var pattr = $("#myanchor").attr("href","https://tutorialdeep.com/jquery/jquery-fading-effect-fadein-fadeout/");
});
});
</script>
<a href="https://tutorialdeep.com/jquery/jquery-animation-effect-animate/" target="_blank" id="myanchor" rel="noopener noreferrer">jQuery Animation Effect</a><br><br>
<button type="button" id="btn-attr">Click me to Set Attribute</button>
<p>When you click the button, you will set or change the value of href attribute of anchor element.</p>

$(document).ready(function(){

$("#btn-attr").click(function(){

var pattr = $("#myanchor").attr("href","https://tutorialdeep.com/jquery/jquery-fading-effect-fadein-fadeout/");

});

</script>

<a href="https://tutorialdeep.com/jquery/jquery-animation-effect-animate/" target="_blank" id="myanchor" rel="noopener noreferrer">jQuery Animation Effect</a><br><br>

<button type="button" id="btn-attr">Click me to Set Attribute</button>

<p>When you click the button, you will set or change the value of href attribute of anchor element.</p>

Output

jQuery Animation Effect(Check the URL of this Link after and before click)

When you click the button, you will set or change the value of href attribute of anchor element.

jQuery Tutorial

jQuery Set Content