How to Elegantly Insert a `` Tag into an HTML Page Using JavaScript?

Inserting a Tag with JavaScript Question:

How can you create a tag and insert it into an HTML page using JavaScript? Is there a method that is more elegant and cross-browser compatible than the current solution that uses innerHTML?

Answer:

The preferred approach is to append the style element directly to the of the document. This method works consistently across major browsers, including Chrome. Here's an improved solution:

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)); } This method provides the following advantages:

It is more elegant and concise. It works in all major browsers, including Chrome. It avoids the need for an additional element in front of the style tag to fix cross-browser issues.