Mit JavaScript DOM erzeugen

Hier nun ein weiterer Artikel zum Thema XML-Erzeugung mit Web-Programmiersprachen. Im Gegensatz zu gestern konzentriere ich mich heute auf das Erstellen mit JavaScript. Aber auch das ist nicht sehr schwierig.

Anders als bei PHP gibt es in JavaScript keine direkte DOM-Objekte, sondern alles muss über das document-Objekt laufen. Auch hier gibt es nur ein paar wichtige Methoden die man kennen sollte:

  • document.createElement();
  • document.createTextNode();
  • element.appendChild();
  • element.setAttribute();


Ich habe mir als Beispiel überlegt in einen <div>-Container eine ähnline Mitarbeiter-Liste zu erzeugen wie gestern mit PHP. Hier nun erstmal der Quellcode der HTML-Datei:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>RED - JavaScript - XML-Loader</title>
  6. <script language="javascript" type="text/javascript" src="red_xml.js"></script>
  7. <script language="javascript" type="text/javascript">
  8. window.onload = function()
  9. {
  10. RED_DOM.create('container');
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <div id="container"></div>
  16. </body>
  17. </html>

Wie man deutlich sehen kann, wird nach dem Laden des Dokumente die Methode meiner Objectes aufgerufen und als Parameter die ID des Containers übergeben.

In diesen Container wird nun die Mitarbeiterliste erzeugt.

  1. var RED_DOM =
  2. {
  3. create : function(node)
  4. {
  5. var dom = document.getElementById(node);

Als erstes erzeuge ich einen Verweis auf das Element.

  1. var mitarbeiter = dom.appendChild(document.createElement('ul'));

Dann füge ich eine ungeordnete Liste hinzu.

  1. var person = mitarbeiter.appendChild(document.createElement('li'));
  2. person.setAttribute('id','2007-12-15-RE');

Danach wird ein neuer Listeneintrag generiert und mit einer ID versehen.

  1. var vorname = person.appendChild(document.createElement('span'));
  2. vorname.appendChild(document.createTextNode('Enrico'));
  3. var nachname = person.appendChild(document.createElement('span'));
  4. nachname.appendChild(document.createTextNode('Reinsdorf'));

Der Vor- und Nachname wird, um ihn zu kapseln in einen <span>-Tag gelegt.

  1. var contacts = person.appendChild(document.createElement('ul'));
  2. var email = contacts.appendChild(document.createElement('li'));
  3. email = email.appendChild(document.createElement('a'));
  4. email.setAttribute('href', 'mailto:enrico@re-design.de');
  5. email.appendChild(document.createTextNode('enrico@re-design.de'));

Um alle Kontakt auflisten zu können, erzeuge ich eine weitere Unterliste. In die die Email als Verweis abgelegt wird.

  1. var telefon = contacts.appendChild(document.createElement('li'));
  2. telefon.setAttribute('class', 'mobil');
  3. var vorwahl = telefon.appendChild(document.createElement('span'));
  4. vorwahl.appendChild(document.createTextNode('0177'));
  5. var nummer = telefon.appendChild(document.createElement('span'));
  6. nummer.appendChild(document.createTextNode('2822557'));
  7. }
  8. } ;

Zum Schluss füge ich noch die Listeneintrag für die Telefonnummer hinzu, welcher sich wiederum in 2 <span>-Tags aufsplittet.

Wie man erkennen kan ist der Ablauf dem von PHP sehr ähnlich. Was das spätere Arbeiten mit AJAX sehr erleichtert. Auch verhält sich ActionScript fast gleich, da es ähnlich strukturiert ist wie JavaScript.

Ein Gedanke zu “Mit JavaScript DOM erzeugen

  1. Pingback: Alle Türchen von 2007 sind offen | RE-Design - Enrico Reinsdorf

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">