PDA

View Full Version : Having JS add/append HTML instead of assigning a class



rubycat
03-25-2008, 11:06 AM
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/tutorials/the-perfect-popup/)

Twey
03-25-2008, 01:59 PM
popups[i].appendChild(document.createElement("span"))
.appendChild(document.createTextNode("\a0"));

rubycat
03-25-2008, 02:05 PM
Rats...I don't understand your answer. What's the "\a0" stuff?

codeexploiter
03-26-2008, 04:23 AM
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 :D

rubycat
03-26-2008, 09:34 AM
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
03-26-2008, 10:47 AM
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
03-26-2008, 11:53 AM
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
03-26-2008, 05:04 PM
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";