JavaScript dynamically creates link tags into head methods

This example demonstrates how JavaScript dynamically creates link tags into head. Share with you for your reference. The specific analysis is as follows:

I believe that many of you who are front-end developers have encountered the need to use JavaScript to dynamically create style sheet tags -- link tags. Here's how to create link tags dynamically in the browser.

Create the link tag using jQuery

If you prefer jQuery for development, jQuery for creating link tags should look like this:

var cssURL = '/style.css',

    linkTag = $('<link href="' + cssURL + '" rel="stylesheet" type="text/css" media="' + (media || "all") + '" charset="'+ charset || "utf-8" +'" />');

//  See, it's dynamic link Tag added to head In the    

$($('head')[0]).append(linkTag);

Create the link tag using native JavaScript

If you like the all-natural JavaScript, here's what you need to say:

var head = document.getElementsByTagName('head')[0],

    cssURL = '/style.css',

    linkTag = document.createElement('link');

 

    linkTag.id = 'dynamic-style';

 linkTag.href = cssURL;

 linkTag.setAttribute('rel','stylesheet');

 linkTag.setAttribute('media','all');

 linkTag.setAttribute('type','text/css');

 

head.appendChild(linkTag);

createStyleSheet is a unique method in IE

The createStyleSheet method, which is specific to IE, is also convenient.

var head = document.getElementsByTagName('head')[0],

    cssURL = 'themes/BlueNight/style.css',

 // document.createStyleSheet  At the same time, we have already put link Tag added to head Yes. How do you say that? It's convenient 

    linkTag = document.createStyleSheet(cssURL);

The createStyleSheet([sURL] [, iIndex]) method takes two arguments, and sURL is the URL path of the CSS file. iIndex is an optional parameter that refers to the index position of the inserted link in stylesheets collection of the page, and the default is to add the newly created style at the end.

Complete solution

With that pretty much covered, let's look at the complete solution:

function createLink(cssURL,lnkId,charset,media){ 

var head = $($('head')[0]),

    linkTag = null;

 

 if(!cssURL){

     return false;

 }

 

 linkTag = $('<link href="' + cssURL + '" rel="stylesheet" type="text/css" media="' + (media || "all") + '" charset="'+ charset || "utf-8" +'" />');

  

 head.append(linkTag);

}

function createLink(cssURL,lnkId,charset,media){ 

    var head = document.getElementsByTagName('head')[0],

        linkTag = null;

  

 if(!cssURL){

     return false;

 }

    

 linkTag = document.createElement('link');

 linkTag.setAttribute('id',(lnkId || 'dynamic-style'));

 linkTag.setAttribute('rel','stylesheet');

 linkTag.setAttribute('charset',(charset || 'utf-8'));

 linkTag.setAttribute('media',(media||'all'));

 linkTag.setAttribute('type','text/css');

    linkTag.href = cssURL; 

 

    head.appendChild(linkTag); 

}

I hope this article is helpful to you in javascript programming.