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);
}
});
});
};
})(jQuery);
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"> <h3>Lorem</h3> <p>Ipsum</p> <ul> <li>dolor</li> <li>sit</li> <li>amet</li> </ul> </div>
$(function() {
$('#test').inspectHTML();
});
You can see the demo below.