Here, we will see how to use the Html() and Hide() methods in jQuery. In jQuery the HTML() method is very useful. By using this method we can change the contents (innerHTML) of matching HTML elements. In this article we create a div element which contains content. When we click on the Button, the text we use in the div will be changed. By using the Hide() method you can hide HTML elements. In this article we create a div element which contains text. When we click on the Button the content we use in the div will be hidden.
First you have to create a web site.
- Go to Visual Studio 2010
- New-> Select a website application
- Click OK
Now add a new page to the website.
- Go to the Solution Explorer
- Right Click on the Project name
- Select add new item
- Add new web page and give it a name
- Click OK
How to execute jQuery code
There are two ways you may want to execute jQuery code.
1. As and when the page loads, execute the JQuery code:
<script language="javascript" type="text/javascript">
$("#div1").HTML("c-sharpCorner.com");
</script>
The benefit of executing a jQuery code in this way is that it doesn't wait until the entire page loads completely, so in case you want the user to see the effects as soon as the corresponding elements are loaded, you can use this.
2. Execute jQuery only when the complete DOM objects (the complete page) has been loaded.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#div1").HTML("c-sharpCorner.com");
});
</script>
This ensures that the jQuery code will execute only if the complete page has been loaded in the browser so you are assured that the user will not see any undesired behavior on the page.
HTML method in JQuery
In jQuery the HTML() method is very useful. By using this method we can change the contents (innerHTML) of matching HTML elements. In this example we create a div element which contains text. When we click on the Button the text we use in the div will be changed.
Syntax
$(selector).html(content)
Example
We are showing you the complete code for the .aspx page given below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>here</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#div1").html("c-sharpCorner.com");
});
});
</script>
</head>
<body>
<h2>
This is a heading</h2>
<div id="div1">
jQuery is great library for developing ajax based application. jQuery is great
library for the JavaScript programmers, which simplifies the development of web
2.0 applications.<br />
<br />
<br />
</div>
<button>
Click me</button>
</body>
</html>
Now run the application and see the Text.
Now click on the Button to change the contents (innerHTML) of the matching HTML elements.
Hide method in JQuery
In jQuery the Hide () method is very useful. By using this method you can hide HTML elements with the hide(). In this example we create a div element which contains text. When we click on the the Button the text we use in the div will be hidden.
Example
We are showing you the complete code for the .aspx page below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>here</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#div1").hide();
});
});
</script>
</head>
<body>
<h2>
This is a heading</h2>
<div id="div1">
jQuery is great library for developing ajax based application.
<br>
jQuery is great library for the JavaScript programmers, which simplifies the development
of web 2.0 applications.<br />
<br />
<br />
</div>
<button>
Hide</button>
</body>
<html>
Now run the application and see the Text.
Now click on the Button (hide) to hide the contents.
Show() method in JQuery
In jQuery the show () method is very useful. By using this method you can show hidden HTML elements. In this example we create a div element which contains text. When we click on the hide Button the text we use in the div will be hidden; after that clicking on the show button shows the content again.
Some Helpful Resources