Question

//================MyJs.js=========================
var objGreeting = {
   Greetings : function() {
   toolbardiv = document.createElement('toolbardiv'); // create div tag dynamically
   toolbardiv.setAttribute('id',"toolbar"); // give id to it
   toolbardiv.className="top"; // set the style classname

  //set the inner styling of the div tag
   toolbardiv.style.position="absolute";

   //set the html content inside the div tag
   toolbardiv.innerHTML="<input id='Greeting-Button' type='button' value='Login'           onClick='objHello.SayHello()'/>"
   }
},

var objHello = {

   SayHello: function() {
   alert("Hello World");
   }
};

Right now this all is in a single JS file and it’s working fine.

Now I want to separate the two classes above into two different js files.
But after doing this I am not able to call the SayHello method.

I am using “GreaseMonkey for IE” and IE8 to run this script.

Answer 1

To have your script insert JS dynamically, you can use something like the following:

function addJS_Node (text, s_URL)
{
    var scriptNode                      = document.createElement ('script');
    scriptNode.type                     = "text/javascript";

    if (text)  scriptNode.textContent   = text;
    if (s_URL) scriptNode.src           = s_URL;

    document.head.appendChild (scriptNode);
}

addJS_Node (null, 'YourPath/YourJS_File.js');

Note that I don’t use IE, so code is untested on that platform but should work.

Depending on the web page, document.body.appendChild may work better.