JavaScript, innerHTML not being recognised by javascript

Question

I have the following code for my website:-

function HCreateWindow(top,left,width,height,zindex,parent) {
var handle = Math.floor(Math.random()*10000000000);

if(parent==null) {
document.write("<div id=\"HWINDOW" + handle + "\"style=\"top: " + top + "px; left: " + left + "px;width: " + width + "px;height: " + height + "px; border: 1px solid black;z-index: " +zindex +"\" class=\"drag\"></div>");
} else {
    document.getElementById("HWINDOW" + parent).innerHTML += "<div id=\"HWINDOW" + handle + "\"style=\"top: " + top + "px; left: " + left + "px;width: " + width + "px;height: " + height + "px; border: 1px solid black;z-index: " +zindex +"\" class=\"drag\"></div>";
}
return handle;
}

It turns out that the innerHTML causes internet explorer 8 to say that innerHTML is null or not an object. Thinking that this may be a bug with IE I updated to IE9. Still have the same problem. However, if I add the line before the 'if':-

document.write(parent);

it works, as if innerHTML is recognised. Got no idea how the two commands are related. The only thing is that I do not want to display the contents of 'parent', as this would make the web page untidy. Any clues?

Answer 1

Assuming you call it inline when you document.write and AFTER the parent exists (poor name for a variable) it should work

function HCreateWindow(top,left,width,height,zindex,parentIdent) {
  var handle = Math.floor(Math.random()*10000000000);
  var html = '<div id="HWINDOW' + handle + '"style="top:' + top + 'px; left:' + left + 'px;width:' + width + 'px;height:' + height + 'px; border:1px solid black;z-index:' +zindex +'" class="drag"></div>';
  if (parentIdent==null) {
    document.write(html); 
  } 
else {
    document.getElementById("HWINDOW" + parentIdent).innerHTML = html;
  }
  return handle;
}

so either

<script>
var hnd = HCreateWindow(10,100,200,400,1000);
</script>

OR

<div id="HWINDOWxxx"></div>

<script>
var hnd = HCreateWindow(10,100,200,400,1000."xxx");
</script>