hey guys,
Welcome to our article with wearewriter.com.
Today we discuss the html () ,text() and val() methods .if you want to any new updates regarding jquery so visit jquery official site
So let’s Start-
Jquery html() method
jquery html() method is used to set or return the entire content of the selected elements.
SYNTAX-
$(selector).html()
It is used to return content.
$(selector).html(content)
EXAMPLE–
<!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(){
$("p").html("Hello <b>wearewriter.com</b>");
});
});
</script>
</head>
<body style="color: white; background-color: #a64d4d;">
<h1>welcome to my article by wearewriter.com</h1>
<p>Jquery HTML() method</p>
<hr>
<button>Click here to change the content of all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>OUTPUT
Jquery text() method
The jQuery text() method is used to set or return the text content of the selected elements
SYNTAX-
$(selector).text()
To set text content:
$(selector).text(content)
EXAMPLE–
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body style="color: white; background-color: #a64d4d;">
<h1>welcome to my article by wearewriter.com</h1>
<p>Jquery HTML() method</p>
<hr>
<p><b>Hello! </b>wearewriter.com</p>
<p></p>
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
</body>
</html>OUTPUT-
Jquery val() method
There are two usage of jQuery val() method -1.It is used to get current value of the first element in the set of matched elements.2 It is used to set the value of every matched element.
SYNTAX-
$(selector).val()
$(selector).val(value)
$(selector).val(function(index,currentvalue))
EXAMPLE-
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("wearewriter.com");
});
});
</script>
</head>
<body style="color: black; background-color:white;">
<h1>welcome to my article by wearewriter.com</h1>
<p>Jquery VAL() method</p>
<hr>
<p>Name: <input type="text" name="user"></p>
<button>Set the value of the input field</button>
</body>
</html> OUTPUT
I hope This Jquery HTML/CSS Tutorials help you to solve your doughts
If you like my article so share with your friends.
