[RESOLVED] FireFox document.write() rendering not in document context

[friendsofwatto]

Hi,

I have a problem using Javascript with Firefox. The problem is as follows...

document.write("<span id='mySpan'>Hello</span>");

This line writes out a span tag with id="mySpan". When I try to access this element through
Javascript using the command

alert(document.getElementById("mySpan"));

it returns null. However, when i just write the <span> tags into my HTML file rather than
writing it in using document.write(), it returns the element.

It is obvious to me, and after quite a bit of fiddling, that document.getElementById() will
not access document elements that have been written in using document.write(). So, how do I
get access to these elements? I took a long look through the DOM for Firefox but I couldn't
find anything. I presume there must be a command like document.script.getElementById() or
document.final.getElementById() that will grab the elements AFTER they were written using
document.write()

Oh, I also tried to access these document.write() elements using things like getElementsByTagName()
and the such, still returned null every time. I have done JavaScript for a while, and there
are no other errors in the code I am using. The code works in IE and Netscape because they
treat the document object as being AFTER the document.write() commands has executed, not before
like Firefox appears to do.

Thanks guys, your answers will be greatly appreciated.

WATTO
watto@watto.org
http://www.watto.org

[Khalid Ali]

my guess is that your problem is in typical wrong useage of document.write()(sorry if I am making a wrong assumption).
What happens when you use document.write once the document is loaded, it writes over the current document.Hence making any other code on your original page out of scope.
Make sure that you write the alert statement with the document.write after you write the span tag.

Best choice will be,IMHO, do not use document.write,use some other DOM method to append a new tag to the document.

[friendsofwatto]

Sorry, I will try to make myself alittle more clear :)

For a website I am creating, each page will have a menu system that pops up links when you move over a certain location on the page. I have set the website up so that the menus are dynamically created from a javascrips file, thus I can change all the menus by making a single adjustment to the javascript file.

My Javascript does as follows... (in psuedo-code)
1. It calls document.write("<span>hover</span>") to add in the areas that trigger the popup
2. It then calls document.write("<span id='0'>Links</span>") to add in the links that will pop up
3. When the mouse moves over a hover span, it finds the links span with the correct ID and it displays it - nothing too challenging.

Now everything draws correctly, however when you move the mouse over the hover square the popup does not show - it causes an error saying that "document.getElementById() has no attributes" or something like that - when i did some alert checking I found that this was because document.getElementById("0") was returning null;

So then I moved the <span id='0'> span into the webpage normally rather than getting the javascript to create it, and my popup code worked.

From this, I determine that the reason why document.getElementById('0') was not working was because my JavaScript was dynamically creating the <span>'s, thus they were not in the document context. This is different to Internet Explorer, because Internet Explorer treats the document.write() statements as being part of the document context, whereas FireFox does not.

So, my question is, how can I address this dynamically-created <span id='0'> tag from FireFox? Alternatively, is there something that would work better than document.write() for the task I am wishing to perform, ie is there a command that will dynamically write the <span> tags in the document context?

Thank you Khalid Ali for trying, I hope I have made myself alittle clearer. I am open to suggestions of other methods other than document.write() :). Thanks!!!

WATTO
watto@watto.org
http://www.watto.org

[Fang]

It would be easier to understand if we had a link.
Do not begin an id with a number http://www.w3.org/TR/REC-html40/types.html#h-6.2
Menu's should work when JavaScript is not available, a server side approach is preferable.

[friendsofwatto]

Fang:

I realise that ids shouldn't start with a number, and in my code they don't, i was just trying to simplify things alittle :)

As for server-side approach - I am very much for this, however I am not able to do this for the website I am creating :(

I have attached an example - it isn't the one I was working on but it uses the same code. The original code was not mine, I got it from a javascript website about 5 years ago, and am now trying to get it working in Firefox since it has become a dominant browser.

A popup should appear if the mouse moves over the link on the left. As you will see, Firefox does not display the menu, whereas other common browsers do. If you go to the JavaScript, take out the line that document.write()s out the <span> tags, and replace it with a <span> tag in the HTML, you will see that it works. (hopefully)

Thanks you for any assistance you can provide.

WATTO
watto@watto.org
http://www.watto.org