JavaScript/DOM/Document/createElement

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Document
Wechseln zu: Navigation, Suche

Die Methode Document.createElement() erzeugt ein neues Element für den Elementbaum. Sie lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Syntax

element = Document.createElement(tagName)

  • tagName: Name des Elements, das erzeugt werden soll ( als Zeichenkette)

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
    function addAChild () {
      var myH2 = document.createElement('h2');
      var myText = document.createTextNode('Eine sehr dynamische Seite');
      myH2.appendChild(myText);
      var Ausgabebereich = document.getElementById('main');
      Ausgabebereich.appendChild(myH2);
    }

    function init () {
      var element  = document.getElementById ('button');
      element.addEventListener ('click', addAChild);
    }
	
    document.addEventListener('DOMContentLoaded', init);
  <main id="main">
    <button id="button">Erzeugen Sie eine Überschrift!</button>
  </main>
Das Beispiel enthält einen main-Bereich, der zunächst bis auf den button leer ist.

Nach dem Laden der Seite wird das DOMContentLoaded-Ereignis gefeuert und dem Button mit addEventListener eine click-Funktionalität hinzugefügt.
Wenn Sie nun auf den Button klicken, wird mit wird mit document.createElement("h2") ein neues Element vom Typ h2 erzeugt, also eine HTML-Überschrift zweiter Ordnung. Die Überschrift wird damit aber noch nicht angezeigt - sie hängt noch nicht einmal im Elementenbaum des Dokuments. Das Element ist lediglich als Objekt erzeugt. Die Methode createElement() gibt das erzeugte Objekt, also in dem Fall das h2-Element, zurück. Der Rückgabewert wird in der Variablen myH2 gespeichert. Über diese Variable ist das neu erzeugte Element von da ab ansprechbar.

Damit die Überschrift einen Inhalt erhält, wird mit createTextNode() ein Textknoten erzeugt. Mit appendChild() wird dann der Textknoten als Kindelement der Überschrift erster Ordnung definiert. Anschließend muss noch die ganze Überschrift in den vorhandenen Elementenbaum eingehängt werden. Dies geschieht in der Anweisung Ausgabebereich.appendChild(myH2);. Dabei wurde zuvor in der Variablen Ausgabebereich das leere main-Element gespeichert, auf das mit getElementById() zugegriffen wurde. Somit wird die Überschrift mit ihrem Text als Kindelement dynamisch in den main-Bereich eingefügt.

Anwendungsbeispiele[Bearbeiten]

ein primitiver HTML-Editor[Bearbeiten]

Beispiel ansehen …
  function init() {
    document.getElementById('button').addEventListener('click', hinzufuegen);
  }
 
  function hinzufuegen () {
    var typ = document.Formular.Elementtyp.options[document.Formular.Elementtyp.selectedIndex].value,
        elementknoten = document.createElement(typ);
    if (typ != 'hr') {
       var textknoten = document.createTextNode(document.Formular.Elementinhalt.value);
       elementknoten.appendChild(textknoten);
    }
      document.getElementById('User').appendChild(elementknoten);
    }

Das Beispiel enthält im sichtbaren HTML-Bereich ein Formular mit einer Auswahlliste, einem Eingabefeld und einem Klick-Button. Unterhalb ist noch ein div-Bereich notiert, der jedoch noch keinen konkreten Inhalt hat. In der Auswahlliste des Formulars kann der Anwender einen HTML-Elementtyp auswählen - in den value-Attributen der option-Elemente sind die tatsächlichen HTML-Elementnamen der jeweiligen Auswahl gespeichert. Im Eingabefeld des Formulars kann der Anwender den Textinhalt für das ausgewählte Element eingeben. Wenn er dann auf den Button klickt, wird die Funktion hinzufuegen() aufgerufen, die in einem JavaScript-Bereich notiert ist.

Dort wird erst einmal der lange, umständliche Ausdruck document.Formular.Elementtyp.options[document.Formular.Elementtyp.selectedIndex].value in der Variablen Typ gespeichert. Der lange Ausdruck bzw. die Variable speichert den vom Anwender im Formular ausgewählten HTML-Elementtyp, also z.B. "h1" oder "p".

Mit document.createElement(Typ) wird dann ein leeres, neues Element vom Typ Typ erzeugt, also je nach Wert der Variablen Typ z.B. ein h1-Element oder ein p-Element. Damit wird das Element aber noch nicht angezeigt. document.createElement() erzeugt lediglich den Elementknoten, hängt ihn aber noch nicht in den Strukturbaum des Dokuments ein. Im Folgenden muss das Script zwischen Elementen unterscheiden, die einen Textinhalt haben, und solchen, die keinen haben. Das hr-Element für Trennlinien, das der Anwender ebenfalls auswählen kann, kann keinen Textinhalt haben. Alle anderen auswählbaren Elemente dagegen können Textinhalt haben. Durch eine if-Anweisung wird daher abgefragt, ob die Variable Typ den Wert "hr" besitzt. Nur wenn dies nicht der Fall ist, wird der Textknoten mit der Methode document.createTextNode() erzeugt. Als Parameter erhält diese Methode den Text, den der Anwender ins Eingabefeld des Formulars eingegeben hat. Danach wird der Textknoten an den erzeugten Elementknoten gehängt, sodass der Text letztendlich auch sichtbar ist. In allen Fällen wird schließlich das neu erzeugte und in der Variablen Elementknoten gespeicherte Element in den Dokumentbaum eingehängt.

Für alle "Einhäng"-Vorgänge wird die Methode appendChild() verwendet. Anwendbar ist die Methode auf ein Knotenobjekt, das Kindknoten haben darf. Also beispielsweise Elementknoten. Als Parameter erwartet die Methode einen Knoten, der als Kindknoten eingehängt werden soll. Wenn im Beispiel also steht: Elementknoten.appendChild(Textknoten); ist Elementknoten eine Variable, in der zuvor durch createElement() ein Elementobjekt erzeugt wurde, und Textknoten ist eine Variable, die zuvor durch Aufruf von createTextNode() einen Textknoten gespeichert hat. Mit der Anweisung document.getElementById("User").appendChild(Elementknoten) wird auf den zunächst leeren div-Bereich im Dokument zugegriffen. Diesem Element wird der neu erzeugte Elementknoten hinzugefügt.

Weblinks[Bearbeiten]