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.
You can easily add nodes to the head element using javascript:

```
link=document.createElement('link');
link.href= your_css_href_function();
link.rel='stylesheet';
link.type='text/css';

document.getElementsByTagName('head')[0].appendChild(link);

```

And the same for your javascript tag:

```
script=document.createElement('script');
script.src= your_javascript_src_function();
script.type='text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);

```