Set Content

Jquery contains predefined methods to set content and attributes to Html elements. Some predefined methods are;
  • text()
  • html()
  • val()

text() method

This method is used to set and return the text contents of selected Html element.

Example of text()

<!DOCTYPE html>
<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(){
        $("#para").text("Hello World !!");
    });
});
</script>
</head>
<body>

<p id="para">This is my first <strong>jQuery<strong> code</p>

<button>Set text</button>

</body>
</html>

Output

This is my first jQuery code

html() method

This method is used to set and return the contents of selected Html element including Html tag.

Example of html()

<!DOCTYPE html>
<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(){
        + $("#para").html("<strong>Hello World !!</strong>");
    });
});
</script>
</head>
<body>

<p id="para">This is my first <strong>jQuery<strong> code</p>

<button>Show Html</button>

</body>
</html>

Output

This is my first jQuery code

val() method

This method is used to set and return the value of form fields. For example get value from textfield.

Example of val()

<!DOCTYPE html>
<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(){
        $("#inputfield").val("Gaurav Rawat");
    });
});
</script>
</head>
<body>

<input type="text" id="inputfield" value="HItesh Kumar">

<button>Set Value</button>

</body>
</html>

Output