js insert style

by Alejandro M

HTML

<h1>Text color</h1>
<span>text</span>

JavaScript

//01

var divNode = document.createElement("div");
divNode.innerHTML = "<style>h1 { color: yellow; }</style>";
document.body.appendChild(divNode);
//02

var cssRule = 'body { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
		//var head = document.querySelector("head")
style.type = 'text/css';
//                var element = document.createElement('link');
//               element.type = 'text/css';
//                element.rel = 'stylesheet';
 //               element.href = href;

if (style.styleSheet){
  style.styleSheet.cssText = cssRule;
} else {
  style.appendChild(document.createTextNode(cssRule));
}

head.appendChild(style);

//03
var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   // browser detection (based on prototype.js)
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = 'span { color: green; }';
   } else {
        var styleText = document.createTextNode('span { color: green; } ');
        styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);


/////remove
//01 old method
var elem = document.getElementById("myDiv");
elem.remove();
//02
var elem = document.getElementById("myDiv");
elem.parentNode.removeChild(elem);