How to dynamically create a link label to the head in JavaScript, linkhead

How to dynamically create a link label to the head in JavaScript, linkhead

The example in this article describes how to dynamically create a link tag to the head using JavaScript. Share it with you for your reference. The specific analysis is as follows:

I believe many front-end users 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 a browser.

Use jQuery to create a link tag

If you like jQuery in development, the link tag created by jQuery should be like this:
Copy codeThe Code is as follows: var cssURL = '/style.css ',
LinkTag = $ ('<link href = "' + cssURL + '" rel = "stylesheet" type = "text/css" media = "' + (media |" all") + '"charset ="' + charset | "UTF-8" + '"/> ');
// You can see that the link label is dynamically added to the head.
$ ('Head') [0]). append (linkTag );
Use native JavaScript to create link labels

If you like pure natural JavaScript, you need to write it like this:
Copy codeThe 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 );
CreateStyleSheet, a unique method in IE

The createStyleSheet method exclusive to IE is also very convenient.
Copy codeThe Code is as follows: var head = document. getElementsByTagName ('head') [0],
CssURL = 'themes/BlueNight/style.css ',
// Document. createStyleSheet has added the link label to the head.
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 indicates the index position of the inserted link in the stylesheets collection on the page. By default, the newly created style is added at the end.

Complete Solution

We have basically finished the introduction. Let's take a look at the complete solution:
Copy codeThe Code is as follows: 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 will help you design javascript programs.