Wie kann ich einen div auf Knopfdruck erstellen?

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Hier ein kleines Beispiel. Vor dem Anfügen an die Liste kannst du natürlich auch noch alle anderen beliebigen Eigenschaften des neuen Elementes ändern.

Hier das ganze noch als Github Gist: https://gist.github.com/Lezurex/aa4dd57bdcbbed5736ac02474611da27

Mehr dazu ebenfalls hier: https://www.w3schools.com/js/js_htmldom_nodes.asp

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Listeneinträge mit JS</title>
</head>
<body>
    <!--In diese Liste werden neue Elemente hinzugefügt-->
    <ul id="liste">
        <li>Erster Eintrag</li>
    </ul>
    <!--Button als Auslöser-->
    <button id="new-entry">Klick mich!</buton>

    <script>
        // Button und Liste in Variablen speichern
        let btn = document.getElementById("new-entry");
        let list = document.getElementById("liste");


        // Ein Click-Event für den Button registrieren
        btn.addEventListener("click", () => {
            // Ein neues li-Element erstellen und in eine Variable speichern
            let newEntry = document.createElement("li");
            // Den Inhalt des Elementes setzen
            newEntry.innerHTML = "Hallo hier neuer Eintrag!";
            // Das Element der Liste hinzufügen
            list.appendChild(newEntry);
        })
    </script>
</body>
</html>
Woher ich das weiß:Berufserfahrung – Informatiker Applikationsentwicklung

Mit Javascript sollte das gehen

Also ein Element erstellt man mit:

var div = document.createElement("div");

Dann kannst du auch weitere Elemente (bzw hier das Element elem) erstellen und an das div als Kind anhängen mit:

// TODO Element elem ist noch nicht erstellt

div.appendChild(elem);

Das ins HTML Dokument einfügen kannst du auf unterschiedliche Weise. Das kommt auf deinen Code an.

Naja, das dürfte sehr stark davon abhängen, mit welchen Werkzeugen Du arbeitest...