Hello Readers,
html():
It returns the entire content inside of specific html element inside the div.
As in example given below, how can we use the jquery html() function.
Here, we consider the div tag and inside the div we take text inside the html (
tag).
Then, we use the html() function to get the text inside the div so it gives the html tag + text.
Points to remember:
1>. html() is only for html documents.
2>. html() is faster than .text().
3>. html() - This jQuery function gets/sets the HTML of any element.
<div id="testDiv">
<p>Cricket</p>
<p>Hockey</p>
<p>Football</p>
</div>
<input type="button" id="firstButton" name="submitButton" value="Submit"/>
<script type="text/javascript">
$(document).ready(function(){
$("#firstButton").click(function(){
var content=$("#testDiv").html();
alert(content);
});
});
</script>
<p>output:</p>
<p>Cricket</p>
<p>Hockey</p>
<p>Football</p>
In the above example html() returns the inner content of DIV element having an id=testDiv
html(htmlString):
It is also the jquery function and in this we pass the html string inside the .html() function.
It returns the only text.
Below is the Example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").html('<b>hello</b>');
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<p>output:</p>
<p>hello</p>
text():
text() can be used in both XML and HTML documents.
It returns the entire content inside a specific html element inside the div (only text).
text()- This jQuery function gets/sets the text (innertext) of any element.
In this example text() will give the string/text that is written inside the html elements.
<div id="testDiv">
<p>Cricket</p>
<p>Hockey</p>
<p>Football</p>
</div>
<input type="button" id="firstButton" name="submitButton" value="Submit"/>
<script type="text/javascript">
$(document).ready(function(){
$("#firstButton").click(function(){
var content=$("#testDiv").text();
alert(content);
});
});
</script>
<p>output:</p>
<p>Cricket</p>
<p>Hockey</p>
<p>Football</p>
text(text):
It is also the jquery function and in this we pass the html string inside the .html() function.
It returns the text as well as html tag.
The Example given below:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div2").text('<b>hello</b>');
});
</script>
</head>
<body>
<div id="div2"></div>
</body>
</html>
<p>output:</p>
<p>hello</p>
0 Comment(s)