[JS] IE parent.removeChild verwijdert class niet?

[Reveller]

Ik heb het volgende:

HTML:

<textarea class="form-textarea" id="post-body"></textarea>

Middels een stukje javascript wil ik deze textarea vervangen door een simpele editor. Hiervoor moet ik o.a. ook een div'je om die textarea maken:

JavaScript:

var container = createNode('div', {'class' : 'editor ' + textarea.id});
this.textarea = parent.removeChild(textarea);
this.textarea.setAttribute('class', 'editor-textarea');
container.appendChild(this.textarea);

In FF krijg ik dan de volgende sourcechart:

HTML:

<div class="editor post-body">
  <textarea class="editor-textarea" id="post-body"></textarea>
</div>

In IE krijg ik echter het volgende:

HTML:

<div class="editor post-body">
  <textarea class="form-textarea" id="post-body" class="editor-textarea"></textarea>
</div>

Met andere woorden, hij voegt een class attribuut toe in plaats van de oude te vervangen. Dus toen probeerde ik eerst de oude class expliciet te verwijderen:

JavaScript:

var container = createNode('div', {'class' : 'editor ' + textarea.id});
this.textarea = parent.removeChild(textarea);
this.textarea.removeAttribute('class');
this.textarea.setAttribute('class', 'editor-textarea');
container.appendChild(this.textarea);

Maar dit levert hetzelfde (foute) resultaat op. Wat doe ik verkeerd en hoe kan ik IE dezelfde output laten genereren als FF?

[crisp]

in IE zal je className moeten gebruiken ism setAttribute (bekende DOM-incompatibiliteit), makkelijker is echter om gewoon dit te doen:

JavaScript:

this.textarea.className = 'editor-textarea';

[Reveller]

crisp schreef op zaterdag 03 mei 2008 @ 23:36:
in IE zal je className moeten gebruiken ism setAttribute (bekende DOM-incompatibiliteit), makkelijker is echter om gewoon dit te doen:

JavaScript:

this.textarea.className = 'editor-textarea';

crisp, dank je voor je snelle reaktie! Ik heb nu jouw oplossing gebruikt, maar is het dan niet handiger om een wrapper rond setAttribute te schrijven? Pseudo:

JavaScript:

function setCorrectAttribute(attr, value) {
  if (browser = IE) {
    if (attr == 'class') attr = 'className';
  }
  setAttribute(attr, value);
}

[crisp]

Reveller schreef op zaterdag 03 mei 2008 @ 23:42:
[...]

crisp, dank je voor je snelle reaktie! Ik heb nu jouw oplossing gebruikt, maar is het dan niet handiger om een wrapper rond setAttribute te schrijven? Pseudo:

JavaScript:

function setCorrectAttribute(attr, value) {
  if (browser = IE) {
    if (attr == 'class') attr = 'className';
  }
  setAttribute(attr, value);
}

Zoiets kan je doen, en veel libraries doen dat ook

Naast 'class' zijn het 'for' attribuut (htmlFor gebruiken in IE), 'style' en eventhandlers notoire pijngevallen ism setAttribute in IE. IE8 zou dit overigens moeten fixen.