[JS] DOM > hoe div legen en weer vullen?

[Reveller]

Zoals gezegd, probeer ik een javascript polletje te bouwen. In mijn vorige topic gezegd dat het het mooiste / beste is om dit te doen via de DOM, ipv innerHTML. Dus ben ik nu voor het eerst hiermee aan het prutsen:

JavaScript:

    var div = null;
    var poll = [
      {'type' : 'radio',
       'ques' : 'hoe gaat het met u?',
       'ansr' : ['heel goed', 'goed', 'gaat wel', 'slecht']
      },
      {'type' : 'text',
       'ques' : 'waarom gaat het zo?'
      },
      {'type' : 'note',
       'note' : 'Bedankt voor uw medewerking!'
      }
    ];

    function pollInit() {
      div = document.getElementById('polldiv');
      pollUpdate();
    }

    function pollUpdate() {
      pollQuestion(item);
      item++;
      if (item == (poll.length)) {
        setTimeout("div.style.display = 'none'", 1000);
      }
    }

    function pollQuestion(iPoll) {
      switch (poll[iPoll]['type']) {
        case 'radio': pollRadio(iPoll); break;
        case 'text' : pollText(iPoll) ; break;
      }
    }

    function pollRadio(iPoll) {
      var question = createNode('text', poll[iPoll]['ques']);
      var br = createNode('br');
      div.appendChild(question);
      div.appendChild(br);
      for (i = 0; i < poll[iPoll]['ansr'].length; i++) {
        var input = createNode('input', {'type' :'radio', 'onclick' : 'pollUpdate()'});
        var text  = createNode('text', poll[iPoll]['ansr'][i]);
        var label = createNode('label');
        var br = createNode('br');
        label.appendChild(input);
        label.appendChild(text);
        div.appendChild(label);
        div.appendChild(br);
      }
    }

    function pollText(iPoll) {
      var question = createNode('text', poll[iPoll]['ques']);
      var textarea = createNode('textarea');
      div.appendChild(question);
      div.appendChild(textarea);
    }

De eerste vraag die pollUpdate tegenkomt, is de multiple choice vraag "hoe gaat het met u?". Als deze beantwoord is, wordt de volgende vraag, "waarom gaat het zo" naar de div geschreven in pollText. De bedoeling is om de inhoud van "polldiv" (op dit moment de radiogroup) te vervangen door de vraag met textarea.

Vragen:

• hoe leeg ik de div zodat ik hem opnieuw kan vullen?
• wat is het voordeel van DOM boven innerHTML? Ik heb het idee dat innerHTML sneller is (en makkelijker )
• heb je algemene opmerkingen over deze code? Ik hoor het graag!

[crisp]

JavaScript:

while (element.hasChildNodes())
  element.removeChild(element.firstChild);

DOM heeft als voordeel dat het gestandaardiseerd is itt innerHTML. Met de laatste zal je dus eerder tegen implementatie-verschillen aanlopen. Feit is inderdaad dat voor grotere fragments met veel elementen innerHTML een stuk sneller is.

[Reveller]

crisp schreef op dinsdag 20 februari 2007 @ 10:15:

JavaScript:

while (element.hasChildNodes())
  element.removeChild(element.firstChild);

Dat werkt perfect, dank je!

DOM heeft als voordeel dat het gestandaardiseerd is itt innerHTML. Met de laatste zal je dus eerder tegen implementatie-verschillen aanlopen.

Maar hoe groot kunnen die implementatieverschillen nu zijn bij zoiets simpels als een radiogroup en een textarea? Ik wil me graag verdiepen in de DOM, omdat het nu eenmaal de correcte manier is om een html document aan te passen, maar zou graag horen dat ik dan meer voordeel behaal dan het omzeilen van implementatieverschillen. Zijn DOM en innerHTML 100% uitwisselbaar?

[crisp]

Reveller schreef op dinsdag 20 februari 2007 @ 10:25:
... maar zou graag horen dat ik dan meer voordeel behaal dan het omzeilen van implementatieverschillen.

Voor eenvoudige zaken zoals het toevoegen van een enkel element of het aanpassen van een enkele textNode is de DOM-approach doorgaans wel sneller.

Zijn DOM en innerHTML 100% uitwisselbaar?

Nee, absoluut niet. Voor sommige zaken kan je niet enkel puur met innerHTML uit de voeten of zal je tegen nadelen en/of beperkingen daarvan aanlopen.