Ways to add javascript files dynamically in a page

by

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

i hope its use full

More Related Contents:

  1. Select div using wildcard ID
  2. Using JQuery and Prototype in the same page
  3. document.createElement(‘script’)… adding two scripts with one callback
  4. Prototype equivalent for jQuery live function
  5. How to avoid conflict between JQuery and Prototype
  6. Get the longest text in HTML document using Jquery or javascript
  7. Hide/Show image on one click [closed]
  8. How to move an element into another element?
  9. Convert blob to base64
  10. jquery (or pure js) simulate enter key pressed for testing
  11. Format date to MM/dd/yyyy in JavaScript [duplicate]
  12. Check if an array is empty or exists
  13. Convert JS Object to form data
  14. jQuery: Get selected element tag name
  15. jQuery drop down menu closing by clicking outside
  16. HTML anchor link – href and onclick both?
  17. jQuery pitfalls to avoid [closed]
  18. Save a pre element as PDF with CSS
  19. Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
  20. Center flex item in container, when surrounded by other flex items
  21. JQuery Ajax Post results in 500 Internal Server Error
  22. Jquery: mousedown effect (while left click is held down)
  23. jQuery: How to listen for DOM changes?
  24. Using jQuery, how do you find only visible elements and leave hidden elements alone?
  25. jQuery show/hide options from one select drop down, when option on other select dropdown is slected
  26. How can I remove wrapper (parent element) without removing the child?
  27. Does the attr() in jQuery force lowercase?
  28. Dynamically change Tweet Button “data-text” contents
  29. Why this regex is not working for german words?
  30. Is it possible to wait until all javascript files are loaded before executing javascript code?

Leave a Comment