Jak vytvořit značku pomocí Javascriptu?

Hledám způsob, jak vložit <style> tag na stránku HTML pomocí JavaScriptu.

Nejlepší způsob, který jsem zatím našel:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

Funguje to ve Firefoxu, Opeře a Internet Exploreru, ale ne v Google Chrome. S <br> je to také trochu ošklivé vpředu pro IE.

Ví někdo o způsobu, jak vytvořit <style> označte to

  1. Je hezčí

  2. Funguje s Chrome?

Nebo možná

  1. To je nestandardní věc, které bych se měl vyhnout

  2. Tři funkční prohlížeče jsou skvělé a kdo vůbec používá Chrome?

Odpověď

Zkuste přidat style prvek do head spíše než body .

Toto bylo testováno v IE (7-9), Firefox, Opera a Chrome:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}