HTML file ...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="src/myJS.js"></script>
</head>
<body onload="myJS.myFunction();">
<p id="p01"></p>
</body>
</html>
External Javascript file (called myJS.js for convenience) ...
myJS = {
myFunction: function()
{
//This works
document.write("Hello world. ");
//This does not work
document.getElementById("p01").appendChild(document.createTextNode("Hello world, again"));
}
};
My best guess is that the node p01 has not been created when myJS is executed, but I thought that onload would do the right thing with it.
HTML file ...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="src/myJS.js"></script>
</head>
<body onload="myJS.myFunction();">
<p id="p01"></p>
</body>
</html>
External Javascript file (called myJS.js for convenience) ...
myJS = {
myFunction: function()
{
//This works
document.write("Hello world. ");
//This does not work
document.getElementById("p01").appendChild(document.createTextNode("Hello world, again"));
}
};
My best guess is that the node p01 has not been created when myJS is executed, but I thought that onload would do the right thing with it.
-
Are you running
document.getElementById()afterdocument.write()? – Álvaro González Commented Jan 4, 2013 at 12:48 -
1
body.onloadis triggered as soon as the page code (that exact html/php/asp file) is rendered, not when all the elements have been loaded.window.onload, on the other hand, is triggered when all the elements have been loaded such as scripts, images etc. – inhan Commented Jan 4, 2013 at 12:49 - What is the problem you are facing ? You should be able to render p01. Are you not getting it ? – Ashwin Commented Jan 4, 2013 at 12:51
-
@inhan I don't think so,
body onload=...andwindow.onloadare exactly the same. – bfavaretto Commented Jan 4, 2013 at 12:54
2 Answers
Reset to default 3If your external js really contains both lines of code you posted, the problem is that document.write is overwriting the whole HTML (it behaves like that as soon as the DOM is loaded). Then getElementById won't find any #p01, because it won't exist anymore.
If you simply remove the document.write call, your code is supposed to work (see a live example).
Because p01 is not yet added to the DOM.
Try like this:
<body>
<p id="p01"></p>
<script type="text/javascript">
window.onload = myJS.myFunction;
</script>
</body>