[JS] Inhoud element aanpassen

[HaTe]

Ik heb een code om bestanden te uploaden met Google Gears. Alle bestanden zet ik een een select (<select>) lijst, wat ik op deze manier doe:

code:

            for(var i = 0; i < files.length; i++)
            {
                bestandenlijst = document.getElementById("bestanden_lijst").innerHTML;
                bestandenlijst.innerHTML = bestandenlijst+'<option id="b'+i+'" value="b'+i+'">'+files[i].name+'</option>';
            }

Dit is de select lijst:

code:

<select id="bestanden_lijst" readonly="readonly" size="10" style="width: 500px;"></select>

Nu wil ik het huidige element een kleurtje mee geven. (n geeft een getal aan en is het huidige element)

code:

document.getElementById('b'+n).style.color = "#ffff00";

In FireFox werkt het wel. In IE niet. Ik ben er achter gekomen dat je het option element dat ik met innerHTML heb gemaakt geen style mee kan geven omdat het eigenlijk niet bestaat.

De oplossing is om het element te maken met createElement

code:

                var bestandOptie = document.createElement('<option>');
                bestandOptie.setAttribute('id','b'+i);
                bestandOptie.setAttribute('value','b'+i);
                document.getElementById('bestanden_lijst').appendChild(bestandOptie);

Dit werkt wel, maar nu moet ik alleen nog de text in de optie krijgen. Want nu staat er geen tekst in.
Dus. Hoe zet ik tekst in het zojuist, met createElement aangemaakte element?

offtopic:
Ik moet toegeven dat ik onder het schrijven van deze post al de helft van de oplossing heb gevonden. Dus dat met createElement. Eerst was mijn vraag namelijk wat een andere manier was om zo'n element te maken.

[Bozozo]

Hiermee moet je er wel komen:

http://www.w3schools.com/htmldom/dom_obj_option.asp

[HaTe]

Nee niet echt. Ik had daar btw al gekeken.
Ik heb nu dit:

code:

                var bestandOptie = document.createElement('<option>');
                bestandOptie.setAttribute('id','b'+i);
                bestandOptie.setAttribute('value','b'+i);
                bestandOptie.text = files[i].name;
                document.getElementById('bestanden_lijst').appendChild(bestandOptie);

bestandOptie.text = files[i].name; heb ik dus toegevoegd, maar het werkt niet

//edit

I DID IT!!!

code:

bestandOptie.innerHTML = files[i].name;

LOL

[ Voor 9% gewijzigd door HaTe op 27-01-2009 19:44 ]

[harrald]

HaTe schreef op dinsdag 27 januari 2009 @ 19:43:
Nee niet echt. Ik had daar btw al gekeken.
Ik heb nu dit:

code:

                var bestandOptie = document.createElement('<option>');
                bestandOptie.setAttribute('id','b'+i);
                bestandOptie.setAttribute('value','b'+i);
                bestandOptie.text = files[i].name;
                document.getElementById('bestanden_lijst').appendChild(bestandOptie);

bestandOptie.text = files[i].name; heb ik dus toegevoegd, maar het werkt niet

//edit

I DID IT!!!

code:

bestandOptie.innerHTML = files[i].name;

LOL

je moet dan ook een textnode maken ( createTextNode )

[Rekcor]

Dit werkt niet in IE:

JavaScript:

var bestandOptie = document.createElement('<option>');
                bestandOptie.setAttribute('id','b');
                bestandOptie.setAttribute('value','b');                
                bestandOptie.text = 'Test';
                document.getElementById('bestanden_lijst').appendChild(bestandOptie);

dit wel:

JavaScript:

var bestandOptie = document.createElement('<option>');
                bestandOptie.setAttribute('id','b');
                bestandOptie.setAttribute('value','b');                
                document.getElementById('bestanden_lijst').appendChild(bestandOptie);
                bestandOptie.text = 'Test';

Zoek de verschillen...

spoiler:

in IE moet je een element soms eerst appenden, voor je er de eigenschappen van dat element toewijst

.

[HaTe]

Ik dacht dat het goed werkte, maar nu werkt het in FireFox niet meer! Ik ben er de hele middag mee bezig geweest en ben er achter gekomen dat als ik het Doctype weghaal, hij het wel doet.
Als ik het op de oude manier weer doe, dan werkt het wel, maar niet in IE.
Doctype:

code:

<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

Werkt alleen in FireFox niet met dit stukje code:

code:

var bestandOptie = document.createElement('<option>');
bestandOptie.setAttribute('id','b'+i);
bestandOptie.setAttribute('value','b'+i);
document.getElementById('bestanden_lijst').appendChild(bestandOptie);
bestandOptie.text = files[i].name;

In IE werkt het dus wel en als ik het doctype weg haal in FF ook wel.

Hoe kan ik dat stukje zo aanpassen dat het ook in Firefox werkt?

[crisp]

JavaScript:

document.createElement('option')

[HaTe]

crisp schreef op woensdag 28 januari 2009 @ 17:40:

JavaScript:

document.createElement('option')

Nice! Dankje man!
Maar waarom deed hij het zonder doctype wel dan? Dat maakt toch niet uit voor de javascript?

[ Voor 20% gewijzigd door HaTe op 28-01-2009 18:13 ]

[crisp]

HaTe schreef op woensdag 28 januari 2009 @ 18:12:
[...]

Nice! Dankje man!
Maar waarom deed hij het zonder doctype wel dan? Dat maakt toch niet uit voor de javascript?

IE is gewoon een rare (of gare) browser...