Introduction:

In this article we will explain how to set or get html content in a html elements using jquery or What is html() method in jquery or why use html () method in jquery with example.

Description:

The jQuery html() method is used to set the content or get the content of the selected elements. html() method is set or get the innerHtml (text + HTML markup).

set content: When you use this method to set content, it overwrites the content of the all matched                      elements.

get content: When you use this method to return content, it returns the content of the first                               matched element.

Let’s see simple Example:

jQuery  html () Method (set text content)

 

In this example we set the html content of div elements.

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery </title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#content').html("jQuery <b>html()</b> method .");
        });
    </script>
</head>
<body>
    <div id="content">       
       
    </div>
   
</body>
</html>

 

OutPut:




jQuery  html () Method (get html content)

 

In this example we get the html content from div element and set the html content of p element.

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery </title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var content = $('#content').html();
            $('p').html(content);
        });
    </script>
</head>
<body>
    <div id="content">       
        jQuery <b>text()</b> method .
    </div>
    <p></p>
</body>
</html>

 

OutPut:




I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.