Zurück: Strings verknüpfen
Dynamisch HTML verändern
Mit Hilfe von jQuery kann man HTML sehr einfach dynamisch verändern. Dafür muss man im HTML eine Grundstruktur aufbauen die man dann zum Beispiel mit Daten befüllt.
1 <ul id="kontakte">
2 </ul>In diese “unordered list” kommen jetzt Kontaktdaten die wir anfangs noch statisch im JavaScript festlegen.
1 var kontaktListe = [
2 {name: 'Amy', nummer: '99 999 9999'},
3 {name: 'Fry', nummer: '88 888 8888'},
4 {name: 'Bender', nummer: '77 777'}
5 ];Ein Eintrag in der Liste besteht aus dem HTML-Element “<li>” in dem Name und Nummer des Kontakts stehen sollen.
1 for (var i = 0; i < kontaktListe.length; i++) {
2
3 var kontakt = kontaktListe[i];
4
5 var htmlEintrag = '<li>' +
6 kontakt.name + ': ' +
7 kontakt.nummer + '</li>';
8
9 alert(htmlEintrag);
10
11 }Ist das HTML-Element korrekt erstellt, kann es in das Dokument eingefügt werden.
So wie für Text kann man dafür auch die jQuery-Funktion append() verwenden.
1 for (var i = 0; i < kontaktListe.length; i++) {
2
3 var kontakt = kontaktListe[i];
4
5 var htmlEintrag = '<li>' +
6 kontakt.name + ': ' +
7 kontakt.nummer + '</li>';
8
9 $('#kontakte').append(htmlEintrag);
10
11 }