Problem adding node in IE6 on page load

J

Joel Byrd

I am having a problem adding a node to the page. This works on other
browser (Opera, Firefox, etc.), but not in IE. The following is the
function to add the node:

[---------------------------------------------------------
function add_div(e) {
//Add div node
var inputBox = document.getElementById('test');
var parent = inputBox.parentNode;

var test_div = document.createElement('div');
test_div.id = 'test_div';

var test_div_tn = document.createTextNode('This is a test');
test_div.appendChild(test_div_tn);

parent.insertBefore(test_div, inputBox);
}//end function add_div
---------------------------------------------------------]

(the id "test_div" is a defined style)

Now, the interesting thing is that it works if I use the function in a
link using "onClick='add_div()'" or "href='javascript: add_div();", but
it does not work when I try to call the function when the page loads.
I've tried just putting the code (that is in the add_div function) at
the beginning of the javascript and calling it explicitly that way.
Now, it actually does work when i put an "onLoad='add_div()';" in the
body tag. But I don't the user to have to put this in manually. So I
tried setting body onLoad equal to add_div, and ran into the same sort
of problems. I've also tried using event listeners (which is what I
normally use). The event listener code is the following:

[----------------------------------------------------------
// Cross-browser event handling for IE5+, NS6+ and Mozilla/Gecko
// By Scott Andrew
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
}// end function addEvent
--------------------------------------------------------------]

and then i would add the following function call.

[------------------------------------------------------
addEvent(window, 'load', add_div, false);
--------------------------------------------------------]

The javascript error I get is either "document.getElementById(...) has
no properties" or "Unknown Runtime Error".

I've been wracking my brain for quite a long time now, and I'd
appreciate if anybody had any kind of insight into this problem.
Thanks!
 
T

Tony

Now, the interesting thing is that it works if I use the function in a
link using "onClick='add_div()'" or "href='javascript: add_div();", but
it does not work when I try to call the function when the page loads.

If you have:

<body>
<script type="text/javascript">
document.getElementById('abc').innerHTML = "goodbye";
</script>
<div id="abc">hello</div>
</body>

Then you will see "hello" displayed and get a javascript error that
document.getElementById... has no properties. This sounds like the
problem you are having.


HOWEVER...

If you have
<body>
<div id="abc">hello</div>
<script type="text/javascript">
document.getElementById('abc').innerHTML = "goodbye";
</script>
</body>

Then you will see "goodbye" displayed and will get no error.

If you use <body onload="">, the onload is triggered AFTER the page is
fully loaded, not when the <body> tag is hit. But inline javascript is
executed as the document is parsed.

You have to define the element first, THEN you can act on it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,989
Messages
2,570,207
Members
46,783
Latest member
RickeyDort

Latest Threads

Top