[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JavaScript or JQuery display HTML as tree

Posted on 2011-10-23
3
Medium Priority
?
227 Views
Last Modified: 2012-05-12
Hi,

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:

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

Then I want to print something like ...

Tag1: p : Hello! My Name is <b>Bob!</b>. You can e-mail me at <a href="mailto:bob@bob.com">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) {
    $(theObject).children().each(function(){
      console.log("[RecurseLevel] " + i + ": " + $(this).tagName);
      i = i + 1;
      splode($(this));
    });
  }
  else {
    console.log("[ChildLevel] " + i + ": " + $(theObject).tagName);
    i = i + 1;
  }
}

$("#myDiv").children().each(function(){
    console.log("[TopLevel] " + i + ": " + $(this).html());
    i = i + 1;
    splode($(this));
});



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.
0
Comment
Question by:CAS-IT
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
zappafan2k2 earned 2000 total points
ID: 37014070
Hmm.  I was just monkeying around and came up with this:
function splode(theObject) {
  $(theObject).find('*').each(function() {
    console.log($(this).html());
    });
  }

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.
0
 

Assisted Solution

by:CAS-IT
CAS-IT earned 0 total points
ID: 37014358
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];
        if(attribute.specified==false)continue;
        dumpedAttribute=attribute.name+'="'+attribute.value+'"';
        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;
}

splode($("#MyDiv"));

Open in new window


I'm nearly there.

Thanks!
0
 

Author Closing Comment

by:CAS-IT
ID: 37043477
Accepted my own comment (partially) because zappanfan's code only showed a way to reference an element's children, not print them.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

867 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