IE: apply stylesheet in dynamically inserted nodes

Discussion in 'Javascript' started by Alvaro G Vicario, Aug 30, 2005.

  1. I'm writing a small script to scan an HTML document and append a <span
    class="foo">Bar</span> node after each item with certain class name.

    My script works fine in Gecko but IE has a serious issue: the CSS style
    defined in an external sheet for span.foo is not applied. The generated
    HTML shows the correct attribute has been inserted (I can see it with an
    old "View Partial Source" hack I've kept for years). Thank you for any
    hint.

    Here's the relevant code:


    // obj is an array with nodes

    for(var i=0; i<obj.length; i++){
    // Create the <span>
    var span=document.createElement('span');
    span.setAttribute('class', 'foo';

    // Creamos <span>'s content
    var txt=document.createTextNode('Bar');

    // Compose <span>
    span.appendChild(txt);

    // Insertamos <span> in document
    if(obj.nextSibling){
    obj.parentNode.insertBefore(span, obj.nextSibling);
    }else{
    obj.parentNode.appendChild(span);
    }
    }
     
    Alvaro G Vicario, Aug 30, 2005
    #1
    1. Advertisements

  2. Alvaro G Vicario wrote:

    Don't use setAttribute, use
    span.className = 'foo';
    instead and your cross browser problems go away.
     
    Martin Honnen, Aug 30, 2005
    #2
    1. Advertisements

  3. *** Martin Honnen wrote/escribió (Tue, 30 Aug 2005 15:48:28 +0200):
    Oh my, the solution is always soooo evident after you've been told! Thanks
    a lot.
     
    Alvaro G Vicario, Aug 31, 2005
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.