JavaScript or JQuery display HTML as tree

Posted on 2011-10-23
Last Modified: 2012-05-12

I'm looking for some JavaScript or JQuery that will display an HTML object's tree, giving the tag names and what html/text the child nodes contain. JavaScript or JQuery doesn't matter to me, so it can start with $("myDiv") or document.getElementById("myDiv").

Basically, if I start with:

  <p>Hello! My Name is <b>Bob!</b>. You can e-mail me at <a href="">Bob AT bob DOT com</a> </p>

Then I want to print something like ...

Tag1: p : Hello! My Name is <b>Bob!</b>. You can e-mail me at <a href="">Bob AT bob DOT com</a>.
Tag2: b : Bob!
Tag3: a : Bob AT bob DOT com

And, the ultimate goal is only to print elements that have no children, i.e. 2 and 3. But once I get this started I think I can take it there.

Here's what I've started with, and it DOES NOT work. I'm hoping someone can help me.

function splode(theObject) {
  if ($(theObject).children().size() >= 1) {
      console.log("[RecurseLevel] " + i + ": " + $(this).tagName);
      i = i + 1;
  else {
    console.log("[ChildLevel] " + i + ": " + $(theObject).tagName);
    i = i + 1;

    console.log("[TopLevel] " + i + ": " + $(this).html());
    i = i + 1;

Basically, that only gets me output at [TopLevel] - I never see anything at [ChildLevel] or [RecurseLevel].

And tagName doesn't ever work, even at the top level. Don't know why.
Question by:CAS-IT
    LVL 12

    Accepted Solution

    Hmm.  I was just monkeying around and came up with this:
    function splode(theObject) {
      $(theObject).find('*').each(function() {

    Open in new window

    Now, if you have input or select tags, they will all be grabbed.  But you can filter out any unwanted ones:
      $(theObject).find('*').not('options, input, select').each(function() {

    Open in new window

    You may need to tweak this to your liking, but maybe it will help you along the way.

    Assisted Solution

    Yeah, I'm pretty close now. I think I can close this out. Using your code and my new code ...

    function splode(theObject) {
      var i = 1;
      $(theObject).find('*').each(function() {
        console.log(i + ": " + dumpElement($(this).get()[0]));
        i = i + 1;
    function dumpElement(element) {
        var elementDump;
        var attrDump = '';
        var attribute;
        var dumpedAttribute;
        for(var i=0;i<element.attributes.length;i++){
            attribute = element.attributes[i];
            attrDump+=((attrDump!='')?' ':'')+dumpedAttribute;}
        var tagName=element.tagName.toLowerCase();
        if(element.innerHTML==''){ elementDump='<'+tagName+((attrDump!='')?' '+attrDump:'')+'/>'; } 
        else { elementDump='<'+tagName+((attrDump!='')?' '+attrDump: '')+'>'+element.innerHTML+'</'+tagName+'>'; }
        return elementDump;

    Open in new window

    I'm nearly there.


    Author Closing Comment

    Accepted my own comment (partially) because zappanfan's code only showed a way to reference an element's children, not print them.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    25 Experts available now in Live!

    Get 1:1 Help Now