[JS] innerHTML of createElement

[Verwijderd]

Hallo,

Ik wil iets .... *ben niet de enige gelukkig*

ok. ik heb 3 div-jes. De eerste doet er niet toe maar goed.

code:

<div>TItle bar</div>
<div>
  Box content<br />
  box content<br />
  box content
</div>
<div>Collapse box</div>

Wanneer ik op de onderste div inhoud klik dan wordt er een javascriptje aangroepen d.m.v. function collapse_box()

code:

    <script language="javascript">
      <!-- Hide for older browers //-->

      function collapse_box (box_id){
        document.getElementById('box[' + box_id + '][1]').style.display = 'none';
      }
      function expand_box (box_id){
        document.getElementById('box[' + box_id + '][1]').style.display = '';
      }
      
      <!-- Stop hiding //-->
    </script>

Dit werkt goed. allemaal goed. Alleen nu moet de text van de onderste DIV veranderd worden in expand box en als er op geklikt wordt de functie expand_box() aangeroepen wordt. (lukt ook allemaal)

Hoe kan ik nu het beste volgens jullie de inhoud van de onderste DIV laten veranderen? D.m.v. innerHTML lukt mij het wel alleen lees ik op het forum dat dit liever niet gebruikt wordt door de meesten. Hoe dan wel? Met createElement?

Graag zou ik een duw in de goede richting krijgen. Als ik een createElement plaats en met appendChild() toevoeg.... waar moet ik dan de inhoud plaatsen van het element... dat soort dingetjes zou ik op dit moment niet weten...

Alvast bedankt!

[Verwijderd]

Het is een beetje vreemd om DOM en innerHTML door elkaar te gebruiken. Nu is innerHTML een klein beetje een veredelde document.write, en om dezelfde reden niet zo geschikt voor XHTML documenten.

In dit geval kun je gewoon de nodeValue wijzigen, van de Text node waarvan je de tekst wilt wijzigen. In jouw voorbeeld zou het iets zijn als document.getElementById('melp').firstChild.nodeValue = 'spef';

[Michali]

Je kunt innerHTML wel gebruiken, alleen heb je dan kans dat dynamisch gekoppelde events van al bestaande elementen in dat stuk HTML vervallen. Oftewel, je kunt innerHTML best gebruiken als je volledige inhoud vervangt en je geen elementen toe voegt met speciale mogelijkheden (zoals extra aangekoppelde variabelen of events ed.). Dan kun je beter een element aanmaken mbv createElement en dan koppelen met appendChild of insertBefore oid.

[crisp]

innerHTML heeft 2 voordelen:
- performance; vooral als het gaat om grote stukken platte HTML met veel elementen is innerHTML stukken sneller dan elk element los aanmaken *
- simplicity; je kan alles af met simpele stringfuncties **

innerHTML heeft ook nadelen:
- werkt niet in XHTML (met XHTML-mimetype)
- werkt sloppy programmering in de hand
- innerHTML wordt vaak ook 'misbruikt' voor simpele textNode replacements waar het enkel manipuleren van de nodeValue sneller was geweest *

* oftewel: voor kleine manipulaties genieten de DOM methods de voorkeur en zijn dan ook sneller
** IE is erg traag wb stringhandling en het werken met grote strings; daar zijn workarounds voor (string opsplitsen in kleine strings in een array en later joinen), maar dat maakt het geheel vaak niet overzichtelijker.

btw: gooi alsjeblieft die HTML comments weg uit je scriptblok (zoals jij ze gebruikt zijn ze sowieso nutteloos in 'oude' browsers - de bedoeling is dat het hele scriptblok in een commenttag staat, maar jij sluit ze op dezelfde regel al af). Daarbij, IE3 en NN3 worden toch nergens meer gebruikt...
en vervang het language attribuut door het type attribuut; this is 2005

[ Voor 21% gewijzigd door crisp op 18-07-2005 00:24 ]

[Verwijderd]

En wat betreft je <div>Title bar</div>, lees eens http://www.naarvoren.nl/artikel/betekenisvolle_xhtml.html en http://www.rikkertkoppes.com/thoughts/smurf-language

[ Voor 26% gewijzigd door Verwijderd op 18-07-2005 13:22 ]

[alienfruit]

Ik gebruik innerHtml eigenlijk alleen om een DOM tree snel weg te pleuren
Iemand enig idee of daar een mooiere oplossing voor is?

[crisp]

alienfruit schreef op maandag 18 juli 2005 @ 15:38:
Ik gebruik innerHtml eigenlijk alleen om een DOM tree snel weg te pleuren
Iemand enig idee of daar een mooiere oplossing voor is?

Ja; stel 'foo' is een element waarin je de hele tree wil leegpleuren:

JavaScript:

var foo = document.getElementById('foo');
while (foo.hasChildNodes()) foo.removeChild(foo.firstChild);

[alienfruit]

JavaScript:

var foo = document.getElementById('foo');
while (foo.hasChildNodes()) foo.removeChild(foo.firstChild);

Natuurlijk! Stom stom stom Maar goed ik heb nu in iedergeval het vak internet scripting gehaald op school, blijft een scriptnazi die PPK