Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Correct placement of code using insertBefore/After

    I'm brand new to JavaScript, and I come from a purely logical scripting background so forgive me if this is the most poorly formed code/bad technique that you've recently seen.

    I've played the google games for days and I surrender. I usually find a way to fight through it and figure it out, but I'm going to have to cede this one.

    I'm simply trying to put a new tab next to a tab that is already present on a page (classed: mirrortab_first)

    I'm trying to use XPath to select the element and then place newTab before it.

    Seemed simple enough to start. But as the code sits, the tab always winds up at the bottom of the page.

    Any thoughts?

    Kind regards.

    Code:
    var newTab = document.createElement("div");
    newTab.setAttribute('id','newTab');
    
    newTab.innerHTML =
    '<table cellpadding="0" cellspacing="0" border="0"><tbody><tr>' +
    '<td class="mirrortab_first">&nbsp;</td>' +
    '<td class="mirrortab_back">' +
    '<a style="cursor:pointer;">Hide Classifieds</a>' +
    '</td>' +
    '<td class="mirrortab_last">&nbsp;</td>' +
    '</tr></tbody></table></div>';
    
    
    var tabLocation = document.evaluate('//td[contains(@class, "mirrortab_first")][1]',document,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);
    for (i=0; i<tabLocation.snapshotLength; i++)
    	{
    		tL = tabLocation.snapshotItem(i).parentNode;
    	}
    
    document.body.insertBefore(newTab, document.tL);

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Ummm...document.evaluate() is *NOT* supported in all browser, at all. Certainly not in MSIE.

    But in any case, you areo doing
    Code:
    document.body.insertBefore(newTab, document.tL);
    but tL is a simple variable, not a member of document. So presumably document.tL is null and so the placement you are getting is expected.

    Did you try simply using
    Code:
    document.body.insertBefore(newTab, tL);
    ???

    But also maybe you should find a way to do this that doesn't depend on evaluate( ).

    If you showed us the web page, it would be easier to help.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried
    Code:
    document.body.insertBefore(newTab, tL);
    Which results in the tab not showing at all.

    I don't have a finished page since I'm just doing this on a blank throw away document just to see if I can do it. Again, I'm learning.

    What ways would I be able to trace a complex path to an element without using evaluate? I'm all about compatibility. :P

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Well, the easiest thing to do would be to put a class name on each of your tabs.

    And then just use getElementsByClassName() and insert the new div before/after the one you are after. It's possible, of course, to look inside the tabs for the <td> with that class, but just slower and more of a pain.

    On really old browsers, getElementsByClassName doesn't exist, but it's easy to write it using getElementsByTagName and then inspecting each element found for the desired class.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •