Style innerHTML

Question

I am trying to understand the behavior of style tags when used with innerHTML.

I did 3 experiments:

Style with existing rule, innerHTML inserts other selector rule

Result: both rules apply. Demo: http://jsfiddle.net/Tcy3B/

Style with existing rule, innerHTML inserts same selector rule

Result: the new rule is ignored. Demo: http://jsfiddle.net/Tcy3B/1/

Empty style, innerHTML inserts a rule, then another innerHTML inserts another rule

Result: the second rule overwrites the first one. Demo: http://jsfiddle.net/Tcy3B/2/

Could anybody explain the logic? This looks totally random to me, sometimes the second rule is added to the first one, sometimes it is ignored, and sometimes it overwrites the first one.

Background: the idea is to build dynamic UIs that rely on css rather than JavaScript, as illustrated in this full text search example.

As an example, here is the code of the second demo:

html:

<style type="text/css">
  .red {color:red;}
</style>
<div class="red">red</div>
<div class="blue">blue</div>

JavaScript:

var st=document.getElementsByTagName("style")[0];
st.innerHTML=".red {color:blue;}";

Tauten

Good question. I've wondered the same thing. – Jocelin

@Asad well, my mistake too :-( This is just a jsfiddle behavior, if I give the stylesheet an id then everything works as expected, with innerHTML overwriting the previous rules. Voting to close the matter. – Tauten

@Tauten Yes, that's true. You should probably post that as an answer, since it explains what's going on. – Lethbridge

Answer 1

As a crude intuitive rule-of-thumb, it may be useful to note that innerHTML is intended to work with HTML, but you're applying it on CSS. You might expect to encounter similar "funny" problems if you tried to modify script elements using innerHTML.

A better interface for dynamically modifying the styling rulesets would be document.styleSheets. The W3 Consortium has a useful overview on this here.

Sherwoodsherwynd

the style element is html. The link you're referencing (+1 for that) uses methods such as innerHTML and getElementById on style elements. – Tauten

Answer 2

This is pretty interesting.

It almost seems like when you have a style already loaded in the <style></style> tags it preserves it after you write to the .innerHTML of the <style> tag. However, each time you write to the .innerHTML it overwrites the whole thing. if in your third example you use += like as shown below, it should add both styles:

var st=document.getElementsByTagName("style")[0];
st.innerHTML = ".red {color:red;}";
st.innerHTML += ".blue {color:blue;}";

Abdomen

Agreed. But I was commenting about his third example. What you have in the style tags originally seems to be preserved, but in the third example, when you have no styles there originally, and only add them one at a time it overwrites them unless you use +=. jsfiddle.net/mtr4b/1 – Abdomen

The styles that are already in there are already applied by the browser. – Electrocardiogram