CODEWITHSUNDEEP
javascriptinternet-explorerinternet-explorer-8prototypejs
Lukas
Lukas

Reputation: 10350

Inserting <style> tags from a string in Internet Explorer

I'm loading a string via AJAX that reads like

<style>[some definitions]</style>
<h1>Lots of Markup</h1>
<p>follows here</p>

Using Webkit/Gecko everything works as expected — the markup is inserted, styles are applied. In IE (8) though the style-definitions are ignored. Actually, if you use the developer tools they are gone.

You can see in this JS-Fiddle that it doesn't work: http://jsfiddle.net/J4Yzr/

Also, I've seen that trick that you create a temporary DOM-Object, set it's innerHTML to your markup and extract your markup as DOM-Objects from your temporary element. That doesn't work with style tags (if I did it right, I'm using prototypeJS):

var text = '<style>h1{color:red;}</style> style added',
    el   = new Element('div').update(text);

console.log(el.firstChild);
//is a HTMLStyleElement in Webkit but a [object Text] in IE

Does anyone have a suggestion how to properly apply the <style> in IE if you get it from such a string?

Upvotes: 2

Views: 233

Answers (2)

Lukas
Lukas

Reputation: 10350

Ok, it's crazy. Add a <br/>-Tag in front of your string and it works in Internet Explorer.

<br/><style>[some definitions]</style><h1>Lots of Markup</h1>

You don't even need to create that temporary DOM-Object to insert code into. Just append it in your site.

What I'm doing now it insert the code with a <br/>-Tag and remove the <br/> afterwards. It's messy but it works.

Upvotes: 1

James D
James D

Reputation: 11

I had the same problem, so I tried your solution, but guess what? When I stripped the
out after rendering markup retrieved via Ajax, the tags disappeared from the DOM! Back to square one.

So my solution is to prepend this instead:

<hr style='display:none'/>

Which did the trick nicely. Thank you so much for solving this issue.

Upvotes: 1

Related Questions