<html>
<head>
<script type="text/javascript">
document.getElementById("eee").innerHTML = "7777";
</script>
</head>
<body>
<p id="eee">aa</p>
</body>
</html>
why does the innerHTML not work in the head, but it does work in the body? Excuse the beginners question but last time i used javascript a year ago this was not a problem at all.
<html>
<head>
<script type="text/javascript">
document.getElementById("eee").innerHTML = "7777";
</script>
</head>
<body>
<p id="eee">aa</p>
</body>
</html>
why does the innerHTML not work in the head, but it does work in the body? Excuse the beginners question but last time i used javascript a year ago this was not a problem at all.
Share Improve this question asked Mar 24, 2012 at 4:41 Sam AdamshSam Adamsh 3,3919 gold badges34 silver badges54 bronze badges5 Answers
Reset to default 3You need to wait for the HTML document to be loaded before it can be manipulated.
<script type="text/javascript">
window.onload = function() {
document.getElementById("eee").innerHTML = "7777";
};
</script>
Keep in mind that scripts are evaluated in the order they are listed in an HTML document, so your script gets run while the browser is processing the "head" section. Since the browser hasn't yet parsed the "body" section it doesn't know about any element with id "eee".
However, by assigning a function to the "window.onload" event, you can delay the execution of your inner HTML assignment until the window has pletely loaded all of the resources and safely manipulate the document.
Note that if your script was in the body section, after the element with id "eee" was listed, then the script would work without the need to wait for the window "load" event.
You need to make sure the document is loaded.
Check answers to this question.
The javascript is running before the dom is ready. Use the event DOMContentLoaded in order to execute this in the header. For older browsers you should use the onload event.
http://jsfiddle/r7VYz/1/
<html>
<head>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("eee").innerHTML = "7777";
}, false);
</script>
</head>
<body>
<p id="eee">aa</p>
</body>
</html>
Its because you script cannot find the element. The scripts in the head load first, when the DOM has been loaded properly or still is loading.
<p id="eee">aa</p>
<!-- Use the script after the element, so that the script can find it -->
<script type="text/javascript">
document.getElementById("eee").innerHTML = "7777";
</script>
Other methods may be executing the script on the onload events of the window
window.onload = function() {
document.getElementById("eee").innerHTML = "7777";
};
You want something more like this. You have to wait for the entire document to load before you can be guaranteed to modify it. Like below
<html>
<head>
<script type="text/javascript">
window.onload = function() {document.getElementById("eee").innerHTML = "7777";};
</script>
</head>
<body>
<p id="eee">aa</p>
</body>
</html>
Here is the working jsfiddle