title: Final cross browser way to dynamically insert style elements into the DOM
body: <p>Although inserting <code>style</code> nodes into the DOM sounds rather trivial, I have found many contradictory ways to do so. So I decided to look it up on stackoverflow and it appears that many posts offer methodologies that do what I need, however they do not necessarily agree with each other.</p>
  
  <p>I came across the following javascript methods:</p>
  
  <p>Returns a style element, and apparently does not have the "styleSheet" property in older browsers.</p>
  
  <pre><code>document.createElement("style")
  </code></pre>
  
  <p>Returns a styleSheet object, although I do not know how you would subsequently access the style element (which you will need to insert into the DOM).</p>
  
  <pre><code>document.createStyleElement()
  </code></pre>
  
  <p>The first three methods below work on styleSheets, others are "hacks" that work directly on the style nodes.</p>
  
  <pre><code>styleSheet.cssText
  styleSheet.addRule
  styleSheet.insertRule
  style.createTextNode
  style.innerHTML
  </code></pre>
  
  <p>I also had a hard time finding the correct syntax to use on (at least) the first three styleSheet methods. E.g. whether or not it is mandatory to include the curly braces and semicolons.</p>
  
  <p>Also, these properties are used for accessing a styleSheet in various browsers:</p>
  
  <pre><code>document.styleSheets[index]
  element.styleSheet
  element.sheet
  </code></pre>
  
  <p>What would be the correct bundle of methods to use for a cross browser approach on inserting style elements? This should cover older browsers like IE6, subselectors (such as <code>:visited</code>) and <code>!important</code> statements.</p>