Html() and Hide() Method in JQuery

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:

$("#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.

$(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.

<head>

$(document).ready(function () {

$("button").click(function () {

$("#div1").html("c-sharpCorner.com");

});

</script>

</head>

<body>

<h2>

This is a heading</h2>

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 />

</div>

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">

<head>

$(document).ready(function () {

$("button").click(function () {

$("#div1").hide();

});

</script>

</head>

<body>

<h2>

This is a heading</h2>

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 />

</div>

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