JavaScript/DOM/Document/createElement

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

Syntax

let element = Document.createElement(tagName)

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

Anwendungsbeispiele

Überschrift erzeugen

ÜBerschrift dynamisch erzeugen ansehen …

   function addNewHeading() {
      const h2 = document.createElement('h2');
      h2.id = 'dynamic';
// oder:  h2.setAttribute('id', 'dynamic');
      h2.textContent = 'Eine sehr dynamische Seite';
      
      document.getElementById('main').appendChild(h2);
   }

   document
      .getElementById('addHeading')
      .addEventListener ('click', addNewHeading);

  <main id="main">
    <button type="button" id="addHeading">Erzeugen Sie eine Überschrift!</button>
  </main>

Das Beispiel enthält einen main-Bereich, der zunächst bis auf den button leer ist.

Das Script registriert mit addEventListener einen Handler für das click-Event: die Funktion addNewHeading.

Wenn Sie nun auf den Button klicken, wird mit document.createElement("h2") ein neues Element vom Typ h2 erzeugt (also eine HTML-Überschrift zweiter Ordnung) und in einer Variablen namens h2 gespeichert. Die Überschrift wird damit aber noch nicht angezeigt - denn createElement stellt sie nur als neues Objekt bereit, hängt sie aber nicht automatisch in den Elementenbaum des Dokuments.

Über die Variable h2 kann das neu erzeugte Element nun weiter bearbeitet werden. Und zwar sollen noch zwei Dinge geschehen: zum einen soll die Überschrift ein id-Attribut mit dem Wert 'dynamic' erhalten, zum anderen soll auch Text hinein. Das id-Attribut könnte mit Hilfe der setAttribute()-Methode gesetzt werden; diese Möglichkeit befindet sich auskomentiert im Beispiel. Für die ID eines Elements stellt die HTMLElement-Schnittstelle aber mit der Objekteigenschaft namens ideine einfachere Möglichkeit bereit. Als zweites soll die Überschrift einen Text zugewiesen bekommen. Dafür ist es am einfachsten, diesen Text der Eigenschaft textContent zuzuweisen, die jeder Elementknoten im DOM besitzt. Statt dessen könnte man auch mit Hilfe der createTextNode()-Methode einen Textknoten erzeugen und mit appendChild() der Überschrift hinzufügen, aber die textContent-Eigenschaft übernimmt das für uns.

Nachdem das h2-Objekt fertig vorbereitet ist, kann es in den vorhandenen Elementenbaum eingehängt werden. Dazu sucht sich das Script das <main>-Element heraus und fügt ihm mit der Methode appendChild() die Überschrift hinzu. Die Überschrift wird dadurch zum letzten Element im main-Element, befindet sich also unter dem Button.

Hinweis:

Um ein H2-Element mit ID und Textinhalt ans Ende des main-Elements einzufügen, hätte man hier auch die Methode insertAdjacentHTML verwenden können.

Beispiel

  document.getElementById('main')
          .insertAdjacentHTML('beforeend', '<h2 id="dynamic">Eine sehr dynamische Seite</h2>');

Allerdings ist hier auf Kontextwechsel und richtige Schachtelung von Anführungszeichen achtzugeben. Einen Attributwert mit einem Anführungszeichen darin kann man mit setAttribute problemlos setzen, einen Textinhalt mit spitzen Klammern oder &-Zeichen auch, aber wenn man HTML direkt einsetzt, muss man darauf achten, solche Zeichen zu maskieren.

ein primitiver HTML-Editor

einfacher HTML-Editor ansehen …

  function init() {
    document.getElementById('button').addEventListener('click', hinzufuegen);
  }
 
  function hinzufuegen () {
    let typ = document.Formular.Elementtyp.options[document.Formular.Elementtyp.selectedIndex].value,
        elementknoten = document.createElement(typ);
    if (typ != 'hr') {
       let 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.

Siehe auch

• JavaScript/Tutorials/DOM
  • DOM-Manipulation - Elemente dynamisch erzeugen
• SVG und JavaScript
  • DOM-Scripting mit createElementNS()
• insertAdjacentHTML - fügt HTML im Umfeld des Elements ein, auf dem sie aufgerufen wird.

Weblinks

• W3C: createElement
• MDN: Document.createElement()