Understanding jQuery HTML Method

jQuery html() function is frequently used to read and modify the contents of a page. The html() method gets the html contents of the first matched element. In jQuery the HTML() method is very useful. By using this method we can change the contents (innerHTML) of matching HTML elements.

Other useful jQuery articles:

Syntax:

Here is the syntax to use this method;

selector.html( )

Example:

<!DOCTYPE html>
<html>
<head>
	<style>
    .green { color:green; }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
    <span>HTML Method html() Example</span>
    <div></div>
    <div></div>
    <div></div>
    <script>
    $("div").html("<span class='green'>Example <b>Repeate</b></span>");
    </script>
</body>
</html>

The first thing you need to be up and running with jQuery is what is called the “document ready” handler. Pretty much everything you code in jQuery will be contained inside one of these.

This accomplishes two things: First, it ensures that the code does not run until the DOM is ready. This confirms that any elements being accessed are actually in existence, so the script won’t return any errors. Second, this ensures that your code is unobtrusive. That is, its separated from content (HTML) and presentation (CSS).

Here is what it looks like:

$(document).ready(function() {
    // all jQuery code goes here
});

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
   p { color:blue; }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
  $(document).ready(function () {
  $("p").text("DOM is now loaded and can be manipulated");
  });
  </script>
</head>
<body>
  <p>Dom Not loaded yet.</p>
</body>
</html>

In Closing

jQuery is capable of so much more, and I have only just begun demonstrating its power and simplicity. We saw that JQuery is very easy to use and we did not worry at all about cross-browser issues, because JQuery provides an abstraction layer that protects us from those problems. Remember to share the article if you have enjoyed it and leave us a comment.