Adding data to a div called from JS
<p>I have a simple script im testing which calls a HTML file. In that html file is a div with the id <code>"test2"</code>.</p>

<p>I am then trying to add content to its innerHTML but it acts like it don't exist, even though the div shows in the browser.</p>

<p>This is how I have approached the idea:</p>

<pre><code>&lt;script&gt;

function call_file(file,div_id){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
    {
    document.getElementById(div_id).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",file,true);
xmlhttp.send();

}

window.onload = function() {  

  file = 'test.html';
  div_id = 'test';
  call_file(file,div_id);
  document.getElementById('test2').innerHTML = 'Hi';
};
&lt;/script&gt;
  &lt;div id="test" class="outer""&gt;&lt;/div&gt;
</code></pre>

<p>Content of "test.html":</p>

<pre><code>&lt;div id="test2" class="inner"&gt;&lt;/div&gt;
</code></pre>

<p>Why does it not find id <code>"test2"</code> with this error, even though i see the div with my own eyes:</p>

<pre><code>Cannot set property 'innerHTML' of null 
</code></pre>
