FireFox 'corrigeert' DOM? - Softwareontwikkeling

vrijdag 11 maart 2005 12:32

Acties:

CMD+Z

Topicstarter

Ik heb een scriptje gemaakt dat dynamisch formpjes toevoegd, ik heb het nu zo gedaan dat er een lege div met een id in de body staat, die wordt gevuld, en op het einde weer een nieuwe lege div wordt neergezet die dan weer met een eventuele volgende gevuld kan worden.

Dit is het script:

JavaScript:

function insertForm() {
    itemCount[formAmount] = formAmount;
    formCount[formAmount] = "form" + formAmount;
    nextFormCount[formAmount] = "form" + (formAmount + 1);
    vraagCount[formAmount] = "vraag" + formAmount;
    veldCount[formAmount] = "veld" + formAmount;
    levelCount[formAmount] = "level" + formAmount;
    tekstCount[formAmount] = "tekst" + formAmount;
    var elementAdder = "";
    if (document.getElementById(nextFormCount[formAmount]) == null) {
        elementAdder = "</div><div id=\"" + nextFormCount[formAmount] + "\">";
    }
    document.getElementById(formCount[formAmount]).innerHTML = "<form id=\"" + itemCount[formAmount] + "\">Vraag: <textarea cols=\"12\" rows=\"1\" id=\"" + vraagCount[formAmount] + "\"></textarea>&nbsp;Veld: <textarea cols=\"12\" rows=\"1\" id=\"" + veldCount[formAmount] + "\"></textarea>&nbsp<SELECT id=\"" + levelCount[formAmount] + "\"><Option value=\"1\">Level 1<Option value=\"2\"> Level 2<Option value=\"3\"> Level 3<Option value=\"4\"> Level 4<Option value=\"5\"> Level 5</SELECT>&nbsp;<br><textarea cols=\"75\" rows=\"5\" id=\"" + tekstCount[formAmount] + "\"></textarea><br><table width=\"600\"><tr><td width=\"60\"><div align=\"left\"><input type=\"reset\" name=\"wissen\" value=\"Schonen\"></div></td><td><div align=\"right\"><input type=\"button\" name=\"wissen\" value=\"Naar boven\" onClick=\"switchUp(this.form.id)\"></div></td><td width=\"60\"><div align=\"left\"><input type=\"button\" name=\"wissen\" value=\"Naar onderen\" onClick=\"switchDown(this.form.id)\"></div></td><td width=\"60\"><div align=\"right\"><input type=\"button\" name=\"wissen\" value=\"Verwijderen\" onClick=\"removeForm(this.form.id)\"></div></td></tr></table></form>" + elementAdder;
    setFormAmount(1);
}

Dit is het stukje in de body waar naar verwezen wordt:

HTML:

1	<div id="form0"></div>

Dan verwacht ik dat na de functie insertForm als elementAdder er aan wordt geplakt het er zo uit ziet:

HTML:

1	<div id="form1">een hoop form gedoe</div><div id="form2"></div>

Maar het wordt dit:

HTML:

1	<div id="form1">een hoop form gedoe<div id="form2"></div></div>

Net alsof FireFox denkt dat ik de boel loop te vernaggelen, en vervolgens maar een </div> verwijdert en op het einde neer zet.

iOS developer

vrijdag 11 maart 2005 12:39

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

ja als je via innerHTML werkt, is dat een hele leijke methode,

je kunt innerHTML niet gebruiken om het bestaande element opeens 'op te breken' ..

dus iets als

code:

<div id="elm"></div>

<script>
document.getElementById( 'elm' ).innerHTML = "</div><div id=\"newElm\">"
</script>

werkt niet zoals jij denkt ... ipv dat er nu twee elementen op hetzelfde niveau staan, wordt enkel een nieuw elemnet toegevoegd als 'child van 'elm'
overigens juist omdat je via innerHTML _niet_ het DOM zelf mag aanpassen, het is enkel een stringgebaseerd functie die hooguit de inhoud van elementen mag aanpassen, de aangesproken elementen niet zomaar mag opdelen ..

volgens mij kun je in dit geval beter net met createElement() werken ..

overigens, doet explorer dit dan wel? dat is enorm 'huuu' ...

[ Voor 14% gewijzigd door RM-rf op 11-03-2005 12:41 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 11 maart 2005 12:40

Acties:

André

Analytics dude

Dat komt omdat je alles inclusief de elementAdder als innerHTML plaatst.

/edit:
Zoals RM-rf als zegt dus.

[ Voor 22% gewijzigd door André op 11-03-2005 12:41 ]

vrijdag 11 maart 2005 12:43

Acties:

T-MOB

Met innerHTML een divje in tweeën splitsen lijkt mij eerlijk gezegd ook geen wenselijk gedrag (van de innerHTML bedoel ik hier. Als je in de volgende code de innerHTML van #foo wilt weten dan verwacht je ook dat je "foo" terugkrijgt, en niet "foo</div><div>bar"

HTML: