I have below code to insert a style into DOM (there is a use case for injecting style into DOM so please don't ask why or say to load the css in .css file).

<script type="text/javascript">
window.onload = function()
{
    var bmstyle = document.createElement('style');
    bmstyle.setAttribute('type', 'text/css');
    var styleStr = "#test-div {background:#FFF;border:2px solid #315300;";
    bmstyle.innerHTML = styleStr;
    document.body.appendChild(bmstyle);
}

</script>

If I run in Firefox, it works fine. But I got this error in Google Chrome:

Line bmstyle.innerHTML = styleStr;
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7

Does anyone have a fix? Thanks

I have below code to insert a style into DOM (there is a use case for injecting style into DOM so please don't ask why or say to load the css in .css file).

<script type="text/javascript">
window.onload = function()
{
    var bmstyle = document.createElement('style');
    bmstyle.setAttribute('type', 'text/css');
    var styleStr = "#test-div {background:#FFF;border:2px solid #315300;";
    bmstyle.innerHTML = styleStr;
    document.body.appendChild(bmstyle);
}

</script>

If I run in Firefox, it works fine. But I got this error in Google Chrome:

Line bmstyle.innerHTML = styleStr;
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7

Does anyone have a fix? Thanks

• javascript
• html
• css
• dom
• google-chrome

• 1 Look like my problem is described here code.google.com/p/chromium/issues/detail?id=3976#makechanges so I wonder if "is there a way to work around??" Thanks – HP. Commented Mar 28, 2010 at 5:42

6 Answers 6

I think it's because you are using innerHTML when everywhere else you are using XML syntax. Try:

bmstyle.nodeValue = styleStr;

Suggestion 2:

It might also be because you are trying to set the innerHTML of a an element not yet in the HTML DOM. If that's the case, my first suggestion should still hold up, or you can go with:

document.body.appendChild(bmstyle);
bmstyle.innerHTML = styleStr;

I'm not sure if you'd need a line inbetween to reclaim the element or if the bmstyle would still point to it.

Just a note for future reference... I'm using the following function to dynamically create CSS styles. I found that using textContent worked the best.

This breaks on Safari

el.innerHTML = css.join('\n'); 

This breaks on FireFox

el.innerText = css.join('\n');

The following is my final code that works on both browsers. IE not tested...

/**
* Write out stylesheets to the page.
* 
* @param {array} css
*/
function print_css(css) {
    var headTag = document.getElementsByTagName('head')[0],
        el = document.createElement('style');

    el.type = 'text/css';
    el.textContent = css.join('\n');
    headTag.appendChild(el);
}

Me too, I had this problem, try this one:

bmstyle.value = styleStr;

It could be because it's invalid to put <style> elements inside the body, but to be honest I would be surprised

Use innerText / textContent. Or create a text node with the styles, and add it to the style tag. It's not because the style is in the body, plus you can always add it to the head, which does not remedy the problem.

Try using:

<f:view xmlns:f="http://java.sun.com/jsf/core" contentType="text/html" />