Javascript dynamically assigned ID

January 19, 2009 1:42 PM

Javascript hair loss: I'm searching for a certain element by regular expression, assigning it an id via an innerHTML replacement, and then using a "getElementById" to find it and manipulate parentNodes. Firefox is fine with this, IE cannot find the newly ID'ed element.

Code snippet:


// various variables seen below assigned about this...

var extractedHTML = document.getElementById('nav').innerHTML;
var reg = new RegExp("<li><a href=\"(" + phost + ")?(" + pdirectory + ")?" + pfile,'g');
var replacementHTML = extractedHTML.replace(reg, "<li id=\"selected\"><a href=\"" + pdirectory + pfile);
document.getElementById('nav').innerHTML = replacementHTML;

// here's the IE choke point:
var par = document.getElementById("selected");


Firebug doesn't pick up any errors in this code, and Firefox executes it fine. However, IE always tells me that par == null, in other words, it doesn't recognize the newly inserted innerHTML. I normally don't fiddle with javascript too much, but I have to do this on the client side.

So, how can I get IE to recognize that innerHTML insert, or is that possible?

posted by maxwelton to Computers & Internet (8 answers total)

Does the regex only affect a single node? It looks like a "greedy" regex that replaces all occurences, which means your id="selected" won't be unique.
posted by Civil_Disobedient at 1:51 PM on January 19, 2009

Response by poster: It does affect only a single node, what it is looking for is an anchor with the same href as the page; on this particular site all pages have a unique file name (the site is completely flat). I have the host and directory as optional arguments as a courtesy to users but the regex could just as easily be:

var reg = new RegExp("<li><a href=\"" + pfile,'g');

And work just fine. "pfile" is unique. (The same error occurs if I substitute this regex for the original.)
posted by maxwelton at 1:59 PM on January 19, 2009

I haven't run the code, but two things strike me off the top of my head:

- "selected" is a reserved word in HTML, try a more unique ID
- It's possible that IE is not reloading the DOM when you change ID's via S/R on the text as opposed to manipulating the DOM directly.
posted by mkultra at 2:11 PM on January 19, 2009

Best answer: OK, I've rigged up a test page for you here - see if that works in IE. I only have IE6 installed as I don't use IE - you'll have to try it on IE7 yourself.

Here's the TLDR: IE capitalises all the tags so "li" becomes "LI" and "a href" becomes "A href". Doing this doesn't make any sense but hey, it's IE.
posted by Mike1024 at 2:18 PM on January 19, 2009

Best answer: To answer the obvious next question, how to make it work on both IE and Firefox, change the 'g' flag on your regexp (which you only need if you want it to match more than once, which you don't) to 'i', to make the regexp case-insensitive. Or combine 'i' and 'g' into 'ig' if you really want to keep it matching globally.
posted by Mike1024 at 2:27 PM on January 19, 2009

Can I suggest that instead of doing this thing 100% in handrolled javascript, you consider using a framework like jQuery?

It isn't without its own weirdness, and using a framework won't eliminate all your hair loss issues, but it has stemmed some of my javascript-related hair loss.

A lot of weird browser bugs have been dealt with by the people who work on the framework so end developers don't have to.
posted by brian60640 at 3:01 PM on January 19, 2009 [1 favorite]

Actually, IE does even weirder things than that when you try to access innerHTML on things... you get a sort of re-written version of what IE itself thinks it's working with, not necessarily the verbatim source code that's on the page. You'd be much better off using DOM methods rather than regexes to manipulate the elements on the page (iterate over document.getElementById('nav').getElementsByTagName('a') and test the href attributes of the links against your regular expression, and alter the link href and the id of the parent li directly on the DOM rather than going through innerHTML).

Or, as brian60640 says, let a framework do the heavy lifting (though the underlying mechanism would be as described above).
posted by letourneau at 3:04 PM on January 19, 2009

Response by poster: brian60640, thanks very much, it was indeed my regex which was screwed by the lack of an "i" flag. I really appreciate your taking the time to mock up a sample.

I also agree this is a pretty weak script, and I should explore using jQuery, which I've used very very lightly in the past.

(I mostly dink around with PHP and could easily have done all of this on the server side if the box supported it, I guess I should actually learn some real JS beyond "this seems to work, on to the next thing")
posted by maxwelton at 3:24 PM on January 19, 2009