JavaScript verfügt bekanntlich über eine Implementierung des W3C-DOMScriptings. Wer aber schon mal versucht hat, damit komplexere DOM-Strukturen zu erzeugen, weiß, wie viel Tipparbeit das ist. Als Beispiel soll eine DOM-Struktur errichtet werden, die folgendem HTML-Code entspricht:

<ul id="Navigation">
<li class="NavEintrag"><a href="/index.html">HOME</a></li>
<li class="NavEintrag"><a href="/angebote.html">Angebote</a></li>
<li class="NavEintrag"><a href="/service.html">Service</a></li>
</ul>

Erläuterung

Mit herkömmlichem JavaScript sieht das Errichten einer entsprechenden DOM-Struktur in etwa so aus:

Beispiel

var UL = document.createElement('UL');
var UL_id = document.createAttribute("id");
UL_id.nodeValue = "Navigation";
UL.setAttributeNode(UL_id);
var LI = [];
LI[0] = document.createElement('LI');
LI[1] = document.createElement('LI');
LI[2] = document.createElement('LI');
var LI_class = [];
LI_class[0] = document.createAttribute('class');
LI_class[0].nodeValue = "NavEintrag";
LI[0].setAttributeNode(LI_class[0]);
LI_class[1] = document.createAttribute('class');
LI_class[1].nodeValue = "NavEintrag";
LI[1].setAttributeNode(LI_class[1]);
LI_class[2] = document.createAttribute('class');
LI_class[2].nodeValue = "NavEintrag";
LI[2].setAttributeNode(LI_class[2]);
var A = [];
A[0] = document.createElement('A');
A[1] = document.createElement('A');
A[2] = document.createElement('A');
var A_href = [];
A_href[0] = document.createAttribute('href');
A_href[0].nodeValue = "/index.html";
A[0].setAttributeNode(A_href[0]);
A_href[1] = document.createAttribute('href');
A_href[1].nodeValue = "/angebote.html";
A[1].setAttributeNode(A_href[1]);
A_href[2] = document.createAttribute('href');
A_href[2].nodeValue = "/service.html";
A[2].setAttributeNode(A_href[2]);
var A_Text = [];
A_Text[0] = document.createTextNode('HOME');
A[0].appendChild(A_Text[0]);
A_Text[1] = document.createTextNode('Angebote');
A[1].appendChild(A_Text[1]);
A_Text[2] = document.createTextNode('Service');
A[2].appendChild(A_Text[2]);
LI[0].appendChild(A[0]);
LI[1].appendChild(A[1]);
LI[2].appendChild(A[2]);
UL.appendChild(LI[0]);
UL.appendChild(LI[1]);
UL.appendChild(LI[2]);

Mit jQuery lässt sich das deutlich kürzen – selbst wenn man das vollständige Kürzungspotenzial gar nicht nutzt:

var UL = $( "<ul></ul>", { "id": "Navigation" } );
var LI = [];
LI[0] = $( "<li></li>", { "class": "NavEintrag" } );
LI[1] = $( "<li></li>", { "class": "NavEintrag" } );
LI[2] = $( "<li></li>", { "class": "NavEintrag" } );
var A = [];
A[0] = $( "<a></a>", { "href": "/index.html" } ).text("HOME");
A[1] = $( "<a></a>", { "href": "/angebote.html" } ).text("Angebote");
A[2] = $( "<a></a>", { "href": "/service.html" } ).text("Service");
LI[0].append(A[0]); 
LI[1].append(A[1]); 
LI[2].append(A[2]); 
UL.append(LI[0]).append(LI[1]).append(LI[2]);

Wenn Sie der jQuery-Objektfunktion ein in Tag-Form ausgeschriebenes HTML-Element übergeben, also beispielsweise $( "<ul></ul>"), dann ist das gleichbedeutend mit document.createElement("ul"). Intern verwendet jQuery dann auch die DOM-Funktion. Doch auch eine Alternative für document.createAttribute() steht bereit. Dazu muss man wissen, dass die JSON-Syntax { … } ein anonymes Objekt erzeugt. Mit einem Konstrukt wie { "id": "Navigation" } erzeugen Sie also ein anonymes Objekt, das eine Eigenschaft id hat, der Sie den Anfangswert "Navigation" zuweisen. Da ein Objekt beliebig viele Eigenschaften haben kann, können Sie kommagetrennt beliebig viele Attribute zu einem Element definieren, z.B. { "id": "Navigation", "lang": "de", style="position: relative;" }.

Mit einem Gesamtkonstrukt wie $( "<ul></ul>", { "id": "Navigation" } ) generieren Sie also ein ul-Element mit einem id-Attribut mit dem Wert Navigation. Das Ergebnis können Sie auch einer Variablen zuordnen, wie im obigen Beispiel der Variablen UL. Mit der gleichen Technik werden die weiteren Elemente und Attribute im Beispiel generiert. Um ein Konstrukt an ein anderes anzuhängen, kommt die bereits bekannte Funktion append() zum Einsatz. Dort werden im Beispiel die Variablen genutzt, in denen zuvor die generierten Teilkonstrukte gespeichert wurden.

Am Ende können Sie die so erzeugte DOM-Objektstruktur UL beispielsweise mit einer Anweisung wie $("#TopNavigation").append(UL) in eine vorhandene DOM-Struktur des Dokuments einhängen (in diesem Beispiel wird die Existenz eines Elements mit id="TopNavigation" vorausgesetzt.

Da durchgängig mit der Standard-jQuery-Objektfunktion gearbeitet wird, ist es auch möglich, durch Verkettung noch einen Textknoten anzuhängen. So lässt sich durch das Konstrukt $( "<a></a>", { "href": "/index.html" } ).text("HOME") eine DOM-Struktur generieren, die am Ende im Browser als <a href="/index.html">HOME</a> ausgegeben wird.

DOM-Strukturen errichen vs. html()

Falls Sie sich in diesem Unterabschnitt fragen, warum Sie umständlich DOM-Strukturen errichten und am Ende einhängen sollten, wenn Sie einfach mit html() beliebigen HTML-Code an gewünschter Stelle einfügen können: das ist ein berechtigter Einwand, und tatsächlich genügt in den meisten Fällen das Arbeiten mit html(). In manchen Anwendungen ist es jedoch wichtig, auch beim Generieren von HTML-Code die volle Kontrolle über die gesamte DOM-Struktur mit all ihren Knoten zu haben. Dazu ist das manuelle Abbilden der Markup-Struktur mittels DOM-Objektknoten gedacht.