Having JS add/append HTML instead of assigning a class

Trying to tweak external window script because of IE failure with icon

[rubycat]

The problem I am running into is with a javascipt which unobtrusively attaches a behavior to all elements that have the rel attribute of "popup." I have it so that it assigns a class and in doing so, it (the class) places a background image to the right of an external link to indicate the link will open in a new window. It works great but there is a problem with the way Explorer handles the icon--if the link text wraps to a second line, the placement of the icon gets all messed up. There is a way around this--to add a conditional comment just for IE (zoom: 1)--which forces any two line text link to the next line so that the text remains all on one line. It's just not going to work for this particular site but I have found a way to add an icon through HTML that Explorer doesn't bork. My problem is that I don't know how to say to the javascript:

"When you find all elements that have the rel attribute of 'popup,' instead of doing this:

// assigns a class so I can attach zoom conditionally for IE to solve 2 line problem
 popups[i].className = "popup";
 }

...add/append the following HTML and do it so that it ends up right before the closing <a> tag (like this: <a href="#" rel="popup">Link Text<span class="icon">&nbsp;</span></a>):

<span class="icon">&nbsp;</span>

Is there a javascript pro who can point me in the right direction? I tried another js forum but am running out of time for finding a solution.

(I'm using an adaptation of the script from the perfect popup tutorial from Ian Lloyd)

[Fotiman]

var s = document.createElement('span'); 
s.className = 'icon'; 
s.appendChild(document.createTextNode(' '); 
popups[i].appendChild(s); 

I haven't tried it, and I'm not sure that assigning a value to 'className' works in Firefox. But see if this does what you're looking for.

[rubycat]

Hiya! Thanks for taking a stab at this. Unfortunately, the nonbreaking space within the span element is being output literally as text on the page.

In place of this:

{
// assigns a class so I can attach zoom conditionally for IE to solve 2 line problem
popups[i].className = "popup";
}

...I inserted this:

{
var s = document.createElement('span');
s.className = 'icon';
s.appendChild(document.createTextNode(' '));
popups[i].appendChild(s);
}

Just wanted to make sure I did that part right. Had to add a closing parenthesis before the semicolon in the createtextnode line. Now, I only wish I understood this...

[Fotiman]

I wasn't sure whether or not the &nbsp; would come through as literal text or not. Try this:

{ 
// Create a new span element with class 'icon' 
var s = document.createElement('span'); 
s.className = 'icon'; 
// Put an empty text node inside the span 
s.appendChild(document.createTextNode(' ')); 
// Append it to the end of the link 
popups[i].appendChild(s); 
}  

That doesn't create an &nbsp; in the span, but I'm not sure you actually need one. See if this about works for you.

[rubycat]

I tried it using "\u00A0" for the non-breaking space and it worked great. Interestingly enough, with just an empty space instead, it collapses in Firefox.

In any case, I'm all set I think and just wanted to thank you for your help and especially for taking the time to comment the code.

[Fotiman]

Glad you got it working. :)