Dynamically Insert External CSS and External JavaScript to Web Pages

Sometimes we may want to insert an external style sheet or an external script dynamically after page has loaded. This can be accomplished with only a few lines of plain JavaScript code.

To insert external CSS file to your web pages dynamically, paste the following code to the JavaScript console in your browser’s developer tools. You just need to change URL in line 6 to URL of your external style sheet (without http: or https:).

var headTag = document.getElementsByTagName('head')[0];
var newLink = document.createElement('link');
newLink.rel = 'stylesheet';
newLink.type = 'text/css';
newLink.href = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
  '//code.jquery.com/ui/1.9.2/themes/black-tie/jquery-ui.css';
headTag.appendChild(newLink);

To insert external JavaScript file to your web pages dynamically, paste the following code to the JavaScript console in your browser’s developer tools. You just need to change URL in line 6 to URL of your external script (without http: or https:).

var headTag = document.getElementsByTagName('head')[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.async = true;
newScript.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//code.jquery.com/jquery-1.8.3.min.js';
headTag.appendChild(newScript);