javascript code not work in HEAD tag

AminM picture AminM · Mar 28, 2013 · Viewed 12.7k times · Source

My webpage has the following code:

<html>
<head>
    <title>This is test Page</title>

     <script language="javascript" type="text/javascript">

         document.getElementById("msg1").innerHTML = document.URL.toString();
        </script>

</head>
<body>

    <div class="sss">
        <p id="msg1"></p>
    </div>


</body>
</html>

As you now at the time the script executes the div doesn't exist but I want to put my JavaScript code only In the <head> tag and I won't put it in middle of HTML code.

But this code only works when I put the <script> tag after the <div> tag. I use VS2010 and firefox 19.0.1

Is there anyway to put code in <head> tag?

Answer

Tharsan picture Tharsan · Mar 28, 2013

Your script relies on the DOM being ready, so you need to execute that function call only after the DOM is ready.

<script language="javascript" type="text/javascript">

window.onload = function() {
    document.getElementById("msg1").innerHTML = document.URL.toString();
}

</script>