Question: I have created a JavaScript function which will return data containing 2 URL's. And I would like to insert these into the HTML code.

e.g. the return URL values are

JavsScript file

```
http://www.domain.com/javascript.js

```

CSS file

```
http://www.domain.com/buttons.css

```

I need to insert these into the code as:

```
<link rel="stylesheet" type="text/css" href="return URL value" />
<script type="text/javascript" src="return URL value"></script>

```

How can I do that?

Thanks

Answer: 
You can load external css (and also js) files dynamically using javascript. Just create the appropriate `<link>` element using javascript.

```
var url  = computeUrl();                      /* Obtain url               */
var link = document.createElement('link');    /* Create the link element  */
    link.setAttribute('rel', 'stylesheet');   /* Set the rel attribute    */
    link.setAttribute('type', 'text/css');    /* Set the type attribute   */
    link.setAttribute('href', url);           /* Set the href to your url */

```

At the moment, we have just created element

```
<link rel="stylesheet" type="text/css" href="your url">

```

And we have stored it in the variable `var link`. It is not over, the `<link>` is not part of the `DOM` yet.
We need to append it

```
var head = document.getElementsByTagName('head')[0]; /* Obtain the <head> element      */
head.appendChild(link);                              /* Append link at the end of head */

```

And it is done.

In the very similar way, you can dynamically add external javascript resource. Just use `<script>` tag instead of `<link>` tag.
One of the ways you can do it is suggested in the snippet below obtained from <http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml>

---

To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:

```
function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

```

---

you will need to adapt this to your own code, obviously, as you haven't provided the actual `js` code that you use. But basically, you will need to call the `loadjscssfile()` function twice when you get the 2 `URL`'s.