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:
- load header
- 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