Having JS add/append HTML instead of assigning a class

[rubycat]

Okay, sorry for the lousy title. 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 goes to two lines, 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'm using an adaptation of the script made available here: http://www.accessify.com/features/tu...perfect-popup/)

[Twey]

popups[i].appendChild(document.createElement("span"))
    .appendChild(document.createTextNode("\a0"));

[rubycat]

Rats...I don't understand your answer. What's the "\a0" stuff?

[codeexploiter]

Actually the value of the text node is 'a0' and the '\' is used to escape any special character to literal and vice versa.

Twey combined four operations in a single statement. If you are having difficulty you can split up these operation into multiple statements which will do exactly what he achieved using a single statement

[rubycat]

Hi. Okay, I get that the non-breaking space has to be written as \u00A0 but what about assigning the class "icon" to the span? Where do you do that in the statements?

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

[codeexploiter]

Try any of the following method;

popups[i].appendChild(document.createElement("span")).appendChild(document.createTextNode("\a0"));
popups[i].lastChild.className = 'icon';

var span = document.createElement("span");
span.className = "icon";
span.appendChild(document.createTextNode("\a0"));
popups[i].appendChild(span);

[rubycat]

Thank you very much! Two for the price of one!

But can you tell me--is one approach better than the other?

Also, out of curiosity, how come you're writing the non-breaking space as "\a0" instead of "\u00A0" ? Is that some type of shorthand? It doesn't seem to work within the script and is output as "a0"

[Twey]

No, it was my error. \XX is used in some languages, but in JS it has to be \uXXXX.

popups[i].appendChild(document.createElement("span"))
    .appendChild(document.createTextNode("\u00A0"))
    .parentNode.className = "icon";