Comment insérer élégamment une balise `` dans une page HTML à l'aide de JavaScript ?

Insérer un Tag avec JavaScript Question :

Comment créer un baliser et l'insérer dans une page HTML à l'aide de JavaScript ? Existe-t-il une méthode plus élégante et compatible avec tous les navigateurs que la solution actuelle qui utilise innerHTML ?

Réponse :

L'approche préférée consiste à ajouter l'élément de style directement à la du document. Cette méthode fonctionne de manière cohérente sur les principaux navigateurs, y compris Chrome. Voici une solution améliorée :

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)); } Cette méthode offre les avantages suivants :

Elle est plus élégante et concise. Elle fonctionne dans tous les principaux navigateurs, y compris Chrome. Cela évite d'avoir besoin d'un élément devant la balise de style pour résoudre les problèmes entre navigateurs.