JSFiddle - React, Tailwind, and code Playground

by jitter

HTML

<span class="hard_link">link in HTML</span>

<br/>
<span class="dom_link">document.createElement('link')</span>

<br/>
<span class="jq_link">$.append() link to head</span>

<br/>
<div style="display:none"></div>
<span class="jq_html_link">$.html() link in div</span>

<br/>
<div style="display:none"></div>
<span class="jq_append_link">$.append() link to div</span>

CSS

span {color:red;}
/* hack to the able to sneak the link tag into the head \*/
</style>
<link rel="stylesheet" href="http://v7.galaxy-inc.com/developmenttests/csstest/css_hard_link.css" type="text/css"/>
<style>

JavaScript

//append link to head by creating a DOM element
var url = "http://v7.galaxy-inc.com/developmenttests/csstest/",
    headID = document.getElementsByTagName("head")[0],
    cssNode = document.createElement('link');
cssNode.rel = 'stylesheet';
cssNode.type = 'text/css';
cssNode.media = 'screen';
cssNode.href = url + 'css_dom_link.css';
headID.appendChild(cssNode);

//use $.append() to add link to head
$('head').append('<link rel="stylesheet" type="text/css" href="'+url+'css_jq_link.css"/>');

$(document).ready(function() {

    //use $.html() to add a link to a div
    //IE strangeness requires links added by $.html() be preceeded by a tag that affects layout (used <br/>)
    $('div:eq(0)').html('<br/><link rel="stylesheet" type="text/css" href="'+url+'css_jq_html_link.css"/>');


    //use $.append() to add a link to a div
    //having a <br/> here breaks IE7/8, and does not fix IE9
    $('div:eq(1)').append('<link rel="stylesheet" type="text/css" href="'+url+'css_jq_append_link.css" />');

});