Wednesday, 27 April 2022

Set Content - text(), html(), and val()

 

Set Content - text(), html(), and val()

We will use the same three methods from the previous page to set content:

  • text() - Sets or returns the text content of selected elements
  • html() - Sets or returns the content of selected elements (including HTML markup)
  • val() - Sets or returns the value of form fields

The following example demonstrates how to set content with the jQuery text()html(), and val() methods:


<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text("Hello world!");

  });

  $("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");

  });

  $("#btn3").click(function(){

    $("#test3").val("Dolly Duck");

  });

});

</script>

</head>

<body>


<p id="test1">This is a paragraph.</p>

<p id="test2">This is another paragraph.</p>


<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>


<button id="btn1">Set Text</button>

<button id="btn2">Set HTML</button>

<button id="btn3">Set Value</button>


</body>

</html>


No comments:

Post a Comment