Dynamically Loading External JavaScript and CSS Files

[Adrina_g]

Hello, I want to know the information by using which I can able to Dynamically Load External JavaScript and CSS Files. I have tried to do this, but I am not able to get the solution for this problem. If you are having any solution from which I can able to achieve it, then I will be thankful to you.

[Reegan]

If you want to load the Javascript or the css file dynamically then it is necessary to to create a swanky new script or a link element in your nutshell and then by making use of the appropriate attributes or parameters you will able to get the solution for your problem. Then it is also necessary to make use of the element.appendChild() method in your program and you will be able to add the element to the location which you want. So, just follow it and you will able to add dynamically external javascript and css files.

[opaper]

I have the following programs which are simple to understand the dynamic loading of the external javascript and css file. So, just make use of it and get your problem solved:
Javascript code:

var start="Game"
alert("First Name: " + start)

Css file code:

#demotable first
{
background-color: black;
}

#demotable second
{
color: blue;
}

[Modifier]

Hey, use the code below if you want to Dynamic Javascript Insertion :

var Id = document.getElementsByTagName("head")[0];         
var NScript = document.createElement('script');
NScript.type = 'text/javascript';
NScript.src = 'http://www.techarena.in/testscript.js';
Id.appendChild(NScript);

[Praetor]

Hello, If you make use of the code below then you will able to get to load the external files into DIV:

function Test(URL, destination)
 {
  document.getElementById(destination).innerHTML = 'Sorting of data';
  if (window.XMLHttpRequest)
 {
request = new XMLHttpRequest();
  } 
else if (window.ActiveXObject)
 {
request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (request != undefined)
 {
request.onreadystatechange = function()
 {
TestDone(URL, destination);
};
request.open("GET", URL, true);
request.send("");
  }
}  
function TestDone(URL, destination) 
{
  if (request.readyState == 4)
 { 
if (request.status == 200) 
{ 
  document.getElementById(destination).innerHTML = request.responseText;
} 
else 
{
document.getElementById(destination).innerHTML=" Testing Error:\n"+ request.status + "\n" +request.statusText;
}
  }
}
function load(name, div) 
{
Test(name,div);
return false;
}

[MindSpace]

If you want to load the javascript file dynamically then you need to simply make use of the small code as given below:

<script type="text/javascript">
function addScript(url)
{
   document.write('<script src="', url, '" type="text/JavaScript"><\/script>');
}
addScript("test.js");
</script>