set dom element class (if element was dynamically created)

Discussion in 'Javascript' started by ted benedict, Jan 25, 2006.

  1. ted benedict

    ted benedict Guest

    hi everybody, didn't find this using the search :( this is my problem:
    i create a dom element dynamically (<span>) and want to assign a class
    attribute to it such that it has some css style, this works in ie, but
    not in firefox :( here's the simple code:

    <div id="somediv">
    </div>

    var div = window.document.getElementById("somediv");
    var span = window.document.createElement("span");
    span.innerHTML = "span";
    span.attributes.getNamedItem("class").nodeValue = "span_class";
    div.appendChild(span);

    so this works well in ie6, but firefox gives this error:
    Error: span.attributes.getNamedItem("class") has no properties

    if i run this code on a statically defined span (in the html file),
    where a class attribute already is set:
    <div id="somediv">
    <span id="spanspan" class="">
    </span>
    </div>
    changing the class to "span_class" works both in ie and firefox.

    how can i fix my above code such that it works in both browsers? it
    seems that on newly created dom elements the class attribute isn't even
    there (to change it), how can i create it, and then change it?

    thanks for your time, all the best
    ted benedict, Jan 25, 2006
    #1
    1. Advertising

  2. ted benedict

    marss Guest

    span.className = "span_class";
    marss, Jan 25, 2006
    #2
    1. Advertising

  3. ted benedict

    ted benedict Guest

    thanks marss, this solved the problem!

    i also found another (a bit longer) solution as an alternative, if it
    helps somebody :)

    var class_attrib = window.document.createAttribute("class");
    class_attrib.nodeValue = "span_class";
    span.attributes.setNamedItem(class_attrib);
    ted benedict, Jan 25, 2006
    #3
  4. ted benedict

    RobG Guest

    ted benedict wrote:
    > thanks marss, this solved the problem!
    >
    > i also found another (a bit longer) solution as an alternative, if it
    > helps somebody :)
    >
    > var class_attrib = window.document.createAttribute("class");
    > class_attrib.nodeValue = "span_class";
    > span.attributes.setNamedItem(class_attrib);


    'class' is a future reserved word in JavaScript 1.5 (the version most
    commonly implemented in modern browsers), hence the use of 'className'
    to refer to the HTML element attribute 'class'.

    There are proposals to add classes (and hence use the 'class' keyword)
    to ECMAScript Ed 4:
    <URL:http://www.mozilla.org/js/language/es4/core/classes.html>

    and JavaScript 2.0:
    <URL:http://www.mozilla.org/js/language/js20/core/classes.html>.

    Microsoft has already added classes to JScript .NET.
    <URL:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnclinic/html/scripting07142000.asp>




    --
    Rob
    RobG, Jan 27, 2006
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. msimmons
    Replies:
    0
    Views:
    470
    msimmons
    Jul 16, 2009
  2. Adi
    Replies:
    2
    Views:
    190
  3. Robert Oschler
    Replies:
    1
    Views:
    125
    Robert Oschler
    Sep 3, 2005
  4. Replies:
    1
    Views:
    118
  5. BananaQuaalude

    Remove child element that was dynamically created

    BananaQuaalude, Dec 17, 2007, in forum: Javascript
    Replies:
    2
    Views:
    547
    My Pet Programmer
    Dec 23, 2007
Loading...

Share This Page