Hinzufügen eines neuen div on button click

Question

** Ich habe ähnliche Fragen gesehen, aber sie haben mir keine enge Lösung geliefert. Fügen Sie das neue div <div class="container" id="section"style="border: 1px solid grey;"> hinzu und alle Tabellen und Felder halten Sie mit diesem div auf Knopfdruck. Ich versuche, es mit dem folgenden Code anzufügen.

function run() { 

    var div = document.createElement("div"); //create new div 
    div.addEventListener("click", run); //bind click to new div 
    this.appendChild(div); //append the new div to clicked div 
    this.removeEventListener("click", run); //remove the original click event 

} 
document.getElementById("section").addEventListener("click", run); 

Kann mir bitte jemand helfen, dies zu sortieren. Vielen Dank im Voraus.

Answer 1

Klick innen rotes Quadrat)

function run() { 
 

 
    var div = document.createElement("div"); //create new div 
 
    div.addEventListener("click", run); //bind click to new div 
 
    this.append(div); //append the new div to clicked div 
 
    this.removeEventListener("click", run); //remove the original click event 
 

 
} 
 
document.getElementById("section").addEventListener("click", run);

div{ 
 
border: 4px solid red; 
 
padding: 4px; 
 
}

<button id="section">run</button>

Answer 2

Wenn ich Sie richtig verstehe, wollen Sie einen ganzen Abschnitt klonen (einschließlich der Kinder) auf eine Schaltfläche klicken und fügen Sie, dass unter dem ursprünglichen .

Sie können dies mit cloneNode(true) tun - aber seien Sie sich bewusst, dass es alle Feldnamen kopieren wird (wie diejenigen an den Eingängen).

container.appendChild(sourceNode.cloneNode(true))

document.getElementById("newsectionbtn").onclick = function() { 
 
    var container = document.getElementById("container"); 
 
    var section = document.getElementById("mainsection"); 
 
    container.appendChild(section.cloneNode(true)); 
 
}

section { border:1px solid #ddd; }

<div id="container"> 
 
    <button id="newsectionbtn">+New Section</button> 
 
    <section id="mainsection"> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
     <th>Field 1</th> 
 
     <th>Field 2</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td><input type="text" name="f1" /></td> 
 
      <td><input type="text" name="f2" /></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </section> 
 
</div>