javascripthtmlhead

JavaScript code does not work in HEAD tag

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 may know, at the time the script executes the div doesn't exist. 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?

Solution

  • 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>