jQuery Set

jQuery Set DOM methods are used to Set the contents and values. The jQuery Set DOM methods are - text(), html(), and val().

The text() method is used to Set the text content of selected elements.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-set-text-paragaph-button").click(function(){
    $(".example-jquery-set-text-paragaph").text("Hello world!");
  });
});
</script>
<p class="example-jquery-set-text-paragaph">This is a paragraph.</p>
<button class="example-jquery-set-text-paragaph-button">Set Text</button>

Output

The html() method is used to Set the content of selected elements.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-set-html-button").click(function(){
    $(".example-jquery-set-html-paragraph").html("<b>Hello world!</b>");
  });
});
</script>
<p class="example-jquery-set-html-paragraph">This is a paragraph.</p>
<button class="example-jquery-set-html-button">Set HTML</button>

Output

The val() method is used to Set the the value of form input fields.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#example-jquery-set-val-button").click(function(){
    $("#example-jquery-set-val-input").val("New Value");
  });
});
</script>
<p>Input field: <input type="text" id="example-jquery-set-val-input"  value="Old Value"></p>
<button id="example-jquery-set-val-button">Set Value</button>

Output