jQuery inner HTML html() method function


jquery jQuery inner HTML html() method function Jquery Library

How to get access and set the inner HTML of HTML tag?

We can easily access the inner HTML tags contents and we can also set the inner HTML content of HTML tags using the jQuery html() function.

Syntax of jQuery html() function

For getting the content of HTML tag or element. $("TagSelector").html(); For setting or assigning the content to HTML tag or element. $("TagSelector").html("Content Value"); We are considering two examples , example to get the HTML element content and example to assign or set the content to the HTML tag.

1- On button click Get the content of div with id=" mydiv1" and alert that content value

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button> Get div content</button> <div id="mydiv1">Welcome to jQuery html() method tutorial. I am in Div with id equal to mydiv1</div> <script type="text/javascript"> $("button").click(function() { var divContent= $("#mydiv1").html(); alert(divContent); }); </script>

Output of getting inner html content

Welcome to jQuery html() method tutorial. I am in Div with id equal to mydiv1

2- Onclick assign some content to the div id=" mydiv2" using jQuery html() function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button> Set div content</button> <div id="mydiv2"></div> <script type="text/javascript"> $("button").click(function() { $("#mydiv2").html("Welcome to CodingPk. I am the content assigned to div id equal to mydiv2"); }); </script>

Output of setting inner HTML content Value

jquery Jquery Library Chapter Next »