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, Example of 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 html method</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#content').html("jQuery <b>html()</b> method .");
        });
    </script>
</head>
<body>
    <div id="content">
       
    </div>
    <p></p>
</body>
</html>

Let’s see, Example of 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 html method</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.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>


 Let's check live example

0 comments


Leave a comment

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

You may also like