How to dynamically create link tags in the head with JavaScript_javascript skills

The example in this article describes the method of dynamically creating link tags in the head using JavaScript. Share it with everyone for your reference. The specific analysis is as follows:

I believe many front-end friends have encountered the need to use JavaScript to dynamically create style sheet tags - link tags. Here we will talk about how to dynamically create link tags in the browser.

Use jQuery to create link tags

If you like to use jQuery in development, then using jQuery to create the link tag should look like this:

Copy code The code is as follows:

var cssURL = '/style.css',
linkTag = $('');
// Please see clearly, the link tag is dynamically added to the head
$($('head')[0]).append(linkTag);

Create link tags using native JavaScript

If you like pure natural JavaScript, you need to write like this:

Copy code The code is as follows:

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

The unique method in IE createStyleSheet

The createStyleSheet method unique to IE is also very convenient.

Copy code The code is as follows:

var head = document.getElementsByTagName('head')[0],
cssURL = 'themes/BlueNight/style.css',
// document.createStyleSheet The link tag has been added to the head at the same time. How to say, it is quite convenient
LinkTag = document.createStyleSheet(cssURL);

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

Complete solution

Basically the introduction is over, let’s take a look at the complete solution:

Copy code The code is as follows:

function createLink(cssURL,lnkId,charset,media){
var head = $($('head')[0]),
LinkTag = null;

if(!cssURL){
Return false;
}

linkTag = $('');

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 will be helpful to everyone’s JavaScript programming design.