Modernes Webdesign zeichnet vor allem die sogenannte Dom Manipualtion aus.
jQuery ul mit li erweitern
Das bedeutet, daß man man nur clientseitig alle Elemente auf der Internetseite verändern kann. Erste Anwendungsfälle waren hier Formulare. Da wurde der Submit Button gerne deaktiviert, wenn ein Formular noch nicht richtig ausgefüllt war. Richtig Pfiff in die ganze Sache hat dann Ajax gebracht. Hier können im Hintergrund serverseitig Informationen abgefragt werden. Hier geht es aber jetzt um „jQuery ul mit li erweitern“. Also einer Liste einen weiteren Punkt hinzufügen. Das kann bei User Eingaben gebraucht werden. Beispielsweise bei einem CMS oder auch einem Online Profil.
jQuery ul mit li erweitern
Trotz aller alternativen JS Javascript Frameworks ist jQuery weiterhin der Quasi Standard im Web. Das ist auch völlig ok finde ich. Hier jetzt das Javascript Snippet für das hinzufügen eines Listen Elements.
|
1 |
$("#navigation ul").append('<li><a href="/navigation/point"><span class="tab">Navigation point</span></a></li>'); |
Die oben abgebildete Methode ist die einfachste und effektivste. Hier nimmt man praktisch den ganzen HTML Part plain und fügt ihm dem ul Tag hinzu. Das mag auf den ersten Blick trivial und nicht sauber programmiert erscheinen. Aber da ein wesentlicher Bestandteil der Clean Code Programmierung die Lesbarkeit ist handelt es sich hier definitiv um Cleancode.
|
1 2 3 4 5 |
$('#content ul').append( $('<li>').append( $('<a>').attr('href','/navigation/point').append( $('<span>').attr('class', 'tab').append("Navigation point") ))); |
Der Vollständigkeit halber ist hier nochmal der Code, wie man ihn vielleicht aus einem Lehrbuch erwartet. In meinen Augen viel schlechter lesbar und sicherlich auch von der Performance her nicht so gut.
