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
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.
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);
