HTML per Javascript steuern

carre

Hallo,

gibt es eigentlich eine einfach Methode eine HTML Ausgabe mittels Javascript zu steuern - Beispiel:

HTML Code 1
} else
{
HTML Code 2

}
</script>

Mir ist klar mit Javascript den HTML Code rausschreiben (document.write) bzw. mit DHTML würde es funktionieren - Problem ist einzig der HTML Code in beiden Teilen ist relativ umfangreich.

Danke und Gruß
Thomas

Ronald

Wenn du es mit Javascript lösen willst (was ich für sehr schlecht halte), dann schreibe den Text dorthin, wo er erscheinen soll und benutze Stylesheets zur Unterstützung bzw. um ihn (un)sichtbar zui machen:

Code

<script type="text/javascript">
if (Bedingung) 
  {
  document.getElementById("text1").style.display = "block";
  document.getElementById("text2").style.display = "none";
  }
else
  {
  document.getElementById("text2").style.display = "block";
  document.getElementById("text1").style.display = "none";
  }
</script> 


<body>
<div id="text1" style="display:block"> --- hier der erste Text --- ></div>
<div id="text2" style="display:none"> --- hier der zweite Text --- ></div>


....
</body>

Alles anzeigen

G.a.d.M.

Ronald

carre

Hi,

danke, hab nachdem ich die Idee aufgegriffen habe (sichtbar / nicht sichtbar) weiter gesucht und habe statt "style.display" "style.visibility" gefunden und verwendet - geht wunderbar.

Nur noch eine Frage dazu - gibt es vielleicht einen Grund warum man style.display statt style.visibility verwenden solle (z.B. Probleme bei unterschiedlichen Browser? ....)?

Danke und Gruß
Thomas

Ronald

Moin!

Bei vivibility wird normalerweise der benötigte Bereich für das (Block)-Element freigehalten, während es by display:none auf 0px höhe zusammenschrumpft.

Wenn du also z.B. ein seitliches HTML-Menü mit Untermenü ähnlich ein Baumstruktur hast, dann würde u.U. zwischen den einzelnen Menüpunkten eine große Lücke klaffen, solange visibility auf 'hidden' gestellt ist. Mit display:none pasiert das nicht.

Auch gibt es weitere Unterschiede, z.B. i.V.m. Tabellen: wenn du mit visibility Zeilen ausblendest, dann bleiben u.U. Tabellenzellen sichtbar, was dann das Layout völlig zerreißen kann. Mit display passiert so etwas normalerweise nicht.

Ein weitere Vorteil von 'display' ist, daß ich ihm auch per Javascript ganz einfach verschiedene Funktionen zuweisen kann, z.B. kann man per mouseclick aus einem inline-Element ein Block- oder Tabellenzellen-Element machen, da tun sich viele Möglichkeiten auf.

Letztendlich ist aber wichtig, daß du das erreicht hat, was du wolltest.

G.a.d.M.

Ronald

Tags