Neue HTML-Elemente einfügen

Hier siehst du, wie du die Methoden createElement und appendChild verwenden kannst, um ein neues HTML-Element in deine App einzufügen. Du definierst eine Funktion, die ein neues <div>-Element erzeugt und der innerHTML-Eigenschaft des neuen <div> einen Text zuweist. Du gibst einem <div>-Element im <body> deines Dokumentes einen ID-Namen und verwendest die Methode getElementById, um dieses <div> mit dem ID-Namen zu finden. Mit appendChild fügst du ein <div> in eine anderes „Behälter“-<div> ein. Mit einem onclick-Attribut machst du ein HTML-Element „anklickbar“. Dann wird eine Funktion aufgerufen, wenn jemand dieses Element im Browser anklickt. So wird deine Webseite interaktiv!

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Elemente einfügen</title>
  <script>
    function einfügenAufgabe() {
       var neueAufgabe = document.createElement("div");
       neueAufgabe.innerHTML = "Neue Aufgabe";
       document.getElementById("Liste").appendChild(neueAufgabe);
    }
   </script>
</head>
<body>
  <div id="Liste" onclick="einfügenAufgabe();">Aufgabe mit Klick einfügen</div>
</body>
</html>

Beispiel ansehen

Zurück zur Mission