AppendChild "Table" Object To "Div" on HTML page From External JS

Question

I am having an js function. That function creates Table element and returns it. I have placed it on same page, then it's working. But I have made that function as external js. Then it's not working. How to append Table return in Div element on HTML Page from external js ?

External JS:

// JavaScript Document
function createtbl() {
  var table = document.createElement("table");
  table.border = "1";

  var row = table.insertRow(-1);
  var cell = row.insertCell(-1);
  cell.innerHTML = "Cell Value";

  var globaldiv = document.getElementById("globaldiv");
  globaldiv.innerHTML = "";
  globaldiv.appendChild(table);

}
createtbl()

<div id="globaldiv"></div>

Answer 1

This will work on all pages containing a div called globaldiv

// JavaScript Document
function createtbl() {
  var table = document.createElement("table");
  table.border = "1";

  var row = table.insertRow(-1);
  var cell = row.insertCell(-1);
  cell.innerHTML = "Cell Value";

  var globaldiv = document.getElementById("globaldiv");
  if (globaldiv) {
    globaldiv.innerHTML = "";
    globaldiv.appendChild(table);
  }    

}
window.addEventListener("load",createtbl);

<div id="globaldiv"></div>