Jquery Set Content


Prev Tutorial Next Tutorial

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


Prev Tutorial Next Tutorial

Advertisements
z
Download Projects

Advertisements

Download WhatsApp Status Video

Buy This Ad Space Only $50 per Month, Ad Size 300X250 Contact on: [email protected] WhatsApp no. 8882538826

Google Adsense Advertisements