Generally we includes an external css ( Cascading Style Sheets ) and
js ( javascript ) files in the HEAD section of our HTML page. We include
them by following conventional method -
2 | <script language= "javascript" src= "javascript/myjs.js" type= "text/javascript" ></script> |
This method added files to the page as they encountered in page source code or synchronously.
Here we will learn how to dynamically load an external file in simple steps.
1. For loading .js or .css file dynamically we use DOM
methods to first create new �script� or �link� element. Assign it to
appropriate attributes and then finally use appendChild() function to
include it into head section on document tree.
Example :
01 | function includejscssfiles(filename, filetype) |
3. Call loadfiles function on onload on tag. Thats it.
function parameter �filetype� lets you tell the script what file type
to expect before loading. After that, the function sets out to create
the element using the appropriate DOM methods, assign it the proper
attributes, and finally, add it to the end of the HEAD section.
By referencing the HEAD element of the page first and then calling
appendChild(), this means the newly created element is added to the very
end of the HEAD tag.
Hope this tutorial will help you.