jQuery: inspecting elements

jQuery can be actually used to inspect the HTML content of a given element by turning its HTML string representation into a jQuery object containing, in turn, other object elements. To accomplish this, I've written a simple plugin that uses the html() method to fulfill this task:

(function($) {

  $.fn.inspectHTML = function(log) {
    var that = this;
    var html = that.html();
    var sanitizedHTML = html.replace(/\s+/g, ''); 
    log = log || false;  
    return that.each(function() { 
      $.each($(sanitizedHTML), function(prop, value) {
  var tag = value.tagName.toLowerCase();
  var content = value.innerHTML;
  if(log) {
    console.log(tag + ' ' + content); 
  } else {
    alert(tag + ' ' + content);


You can either choose to alert your results or log them to your JavaScript console. This simple plugin first sanitizes the HTML by stripping out all the unnecessary white-space. An example:

<div id="test">


$(function() {


You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.