css - Add Rules to Stylesheets with JavaScript - insertRule not working -

im learning using javascript make css more dynamic reason code here wont work. im developing inside visual studio, intellisense not show me method insertrule. basis use documentation learning: https://davidwalsh.name/add-rules-stylesheets https://www.w3.org/wiki/dynamic_style_-_manipulating_css_with_javascript same written there somehow can't use function on object.

window.onload = function() { var bar = newsheet(); bar.insertrule("header { float: left; opacity: 0.8; }", 1);   };  function newsheet() { // create <style> tag var style = document.createelement("style"); //webkit hack style.appendchild(document.createtextnode("")); // add <style> element page document.head.appendchild(style);  return style.sheet; 

};

the element style works other dom tag, , such, can use innerhtml append styles it, since created element javascript, need modify value:

window.onload = function() {   var bar = newsheet();   bar.insertrule("header { float: left; opacity: 0.8; }", 1);   };  function newsheet() {  // create <style> tag  var style = document.createelement("style");   style.innerhtml="p{color:red;}";  style.innerhtml+="h1{color:green;}";   //webkit hack  style.appendchild(document.createtextnode(""));  // add <style> element page  document.head.appendchild(style);   return style.sheet; };