DOM-Builder - DOM-Elemente einfacher erstellen

Um eine (X)HTML-Seite dynamisch zu erweitern, können über das Document Object Model (DOM) Inhalte neu erstellt und in den Inhalt der bestehenden Seite eingefügt werden.
Möchte man das standardkonform tun, arbeitet man mit den DOM-Methoden createElements, setAttributes und appendChilds.

Leider muss dazu sehr sehr viel Quellcode geschrieben werden. Um beispielsweise einen neuen Absatz an das Ende einer HTML-Seite anzufügen, braucht man folgendes Script:

neuerAbsatz = document.createElement('p');
text = document.createTextNode('Neuer Textabsatz.');
neuerAbsatz.appendChild(text);
document.body.appendChild(neuerAbsatz);

Dan Webb hat nun ein Script veröffentlicht, mit dem einem viel Schreibarbeit erspart wird: den DOM-Builder.

Am Anfang einmal als Script in die Seite eingebunden

<script type="text/javascript" src="dombuilder.js"></script>

, muss dann für das oben aufgeführte Beispiel nur noch folgender Code notiert werden:

// um die DOM-Builder-Funktionen aufzurufen:
var html = DomBuilder.apply();
// Textabsatz erstellen
var p = html.P("Neuer Textabsatz.");
// und an den HTML-Body anhängen
document.body.appendChild(p);

Für die Erstellung eines ganzen Formulars reicht folgender Code:

var html = DomBuilder.apply();
var form = html.FORM(
 html.DIV(
  html.INPUT({type : 'text', name : 'email'}),
  html.INPUT({type : 'text', name : 'password'}),
  html.INPUT({type : 'submit'}),
 )
);
document.body.appendChild(form);

Für die Notation gelten folgende Regeln:

• Ein neues Element wird in Großbuchstaben notiert: INPUT
• und sein Inhalt in runde Klammern eingeschlossen: ().
• Besitzt das Element Attribute, werden diese innerhalb der runden Klammern in geschweiften Klammern notiert: {type : 'text', name : 'password'}.
• Beim Definieren von Klassen muss das Attribut class in Anführungszeichen gesetzt werden: P({ 'class' : 'warning' }.
• Mehrere Elemente oder Attribute werden durch ein einfaches Komma voneinander getrennt: ,.

via ajaxian

Verwandte Beiträge

• Barrierefreier Newsticker von Wolfgang Bartelme
• DOM-ROLLOVER auf Basis von DOM-Scripting und unobtrusive JavaScript
• Video-Trainings zur Theorie des Document Object Models (DOM)
• JavaScript und Ajax - openbook von Galileo
• jQuery-Inspirationen
• DOM-Builder - DOM-Elemente einfacher erstellen
• DOM-Scripting-Slideshow

Dienstag, 25. April 2006 13:04 Uhr in JavaScript / DOM Ein Kommentar
Kommentar-Abo kommentieren | TrackBack-URI