Html Element mit Javascript erstellen

Question

Wie kann ich ein html Element mit Javascript erstellen und an ein anderen Element anhängen?

<div>
    <div>Klicke den Link <a href="#">Neues Element</a></div>
</div>

Wenn man den Link anklickt soll nach dem Div genau das selbe Div noch einmal erscheinen und darunter angehängt werden.

<div>
    <div>Klicke den Link <a href="#">Neues Element</a></div>
    <div>Klicke den Link <a href="#">Neues Element</a></div>
</div>

Answer 1

Mit createElement kannst du ein HTML Element im DOM erstellen und mit appendChild an ein bestehendes Element anhängen. In diesem Beispiel wird ein Event Listener hinzugefügt der auf Klick-Ereignisse des Links mit der ID "addLink" wartet. Wenn der Link geklickt wird, wird ein neues div Element erstellt und dem Container Div angehängt.

<div id="container">
    <div><a href="#" id="addLink">Neues Element</a></div>
</div>

<script type="text/javascript">
const addLink = document.getElementById("addLink");
const container = document.getElementById("container");

addLink.addEventListener("click", function(event) {
    
    event.preventDefault();
    
    const newDiv = document.createElement("div");
    newDiv.textContent = "Neues Element";

    container.appendChild(newDiv);
    
});
</script>

JSFiddle Demo