HTML-Elemente einfügen und entfernen

Mit den JavaScript-Methoden appendChild() und removeChild() lassen sich HTML-Elemente nachträglich in ein Dokument einfügen bzw. aus diesem wieder entfernen. Wie die Namen der Methoden schon andeuten, beziehen sich diese Methoden auf ein Kindelement eines Elternelements innerhalb des DOM-Baumes des betreffenden Dokuments, wobei die Identifikation dieser Elemente in diesem Beispiel über ihr id-Attribut erfolgt (Zeilen 9, 16 und 17).

Wird ein Element eingefügt, wird dieses zuvor durch die Methode document.createElement() bestimmt, wobei als Wert die Art des Elements übergeben wird (z. B. p, div, etc.). Mit der Methode setAttribute() können dem Element beliebige Attribut/Werte-Paare zugewiesen werden. Über das Attribut innerHTML wird der Inhalt des Elements festgelegt (das, was sich zwischen dem öffnenden und dem schließenden Tag befinden soll), sofern das Element nicht durch ein einfaches Tag wie bei img oder input beschrieben wird.

Im Beispiel wird in Zeile 25 ein Button erzeugt, über den sich per onclick ein neuer Absatz als Kind des Elements mit id='dummy' erzeugen lässt. Gleichzeitig wird bei onclick der Absatz, der den Button enthält, gelöscht.

Unterhalb des Codebeispiels lässt sich dieses praktisch testen.

Quelltext auswählen

<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>HTML-Elemente mit JavaScript einfügen und entfernen</title>
    <meta charset='UTF-8'>
    <script>
      /* <![CDATA[ */
      function addElement(parent, tag, content) {
        var parentElement = document.getElementById(parent);
        var newChild = document.createElement(tag);
        newChild.setAttribute('style', 'color:yellow;');
        newChild.innerHTML = content;
        parentElement.appendChild(newChild);
      }
      function removeElement(parent, id) {
        var parentElement = document.getElementById(parent);
        var childElement = document.getElementById(id);
        parentElement.removeChild(childElement);
      }
      /* ]]> */
    </script>
  </head>
  <body id='top'>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p id='addbutton'><button type='button' onclick='addElement("dummy", "p", "Dies ist ein neuer Absatz.");removeElement("top", "addbutton");'>Absatz einfügen</button></p>
    <div id='dummy'></div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.