#1117 new
brad

IE can't edit innerHTML on dynamically created style element

Reported by brad | August 9th, 2010 @ 06:05 PM

If I dynamically add a node to my page with something like this:

$('body').insert(new Element('style').update('.myElements { color:red }'));
then ".myElements" turn red in Firefox, Safari, Opera. However IE chokes on the 'update' call, because it can't put innerHTML in the dynamically created style node.
( IE8: "Unknown runtime error" in prototype.1.6.1.js Line 1890 ) ( same problem with 1.7_rc2. Line 1998 )

IE will let me do this:

var tmp = new Element('div').update('<p>x</p><style> .myElements { color:red } </style>');
document.body.appendChild(tmp.childNodes[1]);

Crazy.

Can prototype handle IE so that the first snippet works? (At worst, by incorporating the silly workaround in the second snippet?)

Thanks, Brad

PS the reason you would want to do this rather than

$$(".myElements").invoke('setStyle', {color:'red'})
is because you might be adding more ".myElements" to the DOM later, and they should be red as soon as they are added.

Comments and changes to this ticket

  • brad

    brad August 9th, 2010 @ 06:26 PM

    • Tag changed from dom manipulation, dynamic css, ie, innerhtml, ltstylegt to dom manipulation, dynamic css, dom, ie, innerhtml, ltstylegt
  • Andrew Dupont

    Andrew Dupont August 15th, 2010 @ 02:34 AM

    • Assigned user set to “Andrew Dupont”
    • Importance changed from “” to “Low”

    Hmm, possibly. At first it seems like a crazy hack, but then it's exactly what we do for other elements for which IE has trouble with innerHTML, like TR.

    There's also been chatter on the prototype-core mailing list about perhaps writing a plugin that provides a more elegant interface for creating and managing style rules.

  • Heiko Sippel

    Heiko Sippel December 9th, 2010 @ 10:57 AM

    Same problem occurs with cloned elements. I tried to implement a deep-copy-function using clone:

    deepCopy(element){
    
        var clone = element.clone();
        var children = element.childElements();
        if(children.size() == 0){
            if(element.innerHTML.length > 0){  // <---- necessary
                clone.update(element.innerHTML);
            }
        }   
        else{
            for(var i = 0; i < children.size();i++){
                var child = this.deepCopy(children[i]);
                clone.insert(child);
            }
        }
        return clone;
    }
    

    The if-statement "element.innerHTML.length > 0" is mandatory, otherwise IE raises an unknown runtime error. update does not work in IE on elements with length of innerHTML == 0 (e.g. img tags, like in my case). Maybe this error could be caught in prototype.js (line #1890).

  • Jason Westbrook

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Pages