1

I am having an annoying problem. I am trying to modify the header of my web page, which is loaded with the jquery load function.

The problem is that header is loaded after I want to modify an element in it. I can not get the sequence right of:

  1. load header
  2. modify header

Example:

Main script

<head>
    <script>
        $(function () {$('#includeHeader').load('path to Header.html');});
    </script>
</head>

<body>
    <script>
        window.onload = function () {
            document.getElementById('aktdatum').innerHTML = 'some text';
        };
    </script>

    <header id="includeHeader"> </header>

    ...
</body>

Header:

<div>
     <ul>
         ...
         <li class="nav_info">
            <div id="aktdatum">
            </div>
         </li>
    </ul>
</div>

Error:

(index):34 Uncaught TypeError: Cannot set property 'innerHTML' of null

Comment:

So, the problem is that when I want to execute this piece of code
document.getElementById('aktdatum').innerHTML = 'some text'
the header is not in the body yet.

Apparently the header is inserted after the call. So my question is how to execute the script:
document.getElementById('aktdatum').innerHTML = 'some text'
after the header has been loaded.

Obviously window.onload doesn't do the job.

Do you have any recommendation?

Thanks, Rok

CBroe
  • 91,630
  • 14
  • 92
  • 150
Rok Bohinc
  • 47
  • 6

0 Answers0