ボタンをクリックすると新しいdivが追加されます

Question

**私は同様の質問を見ましたが、私に近い解決策を提供していません。 新しい<div class="container" id="section"style="border: 1px solid grey;">を追加し、すべてのテーブルとフィールドはボタンクリックでdivを保持します。 次のコードで追加しようとしています。

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); 

誰でもこの問題を解決するのに手伝ってください。 ありがとうございます。赤い四角の内側

Answer 1

クリック）

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

私が正しくあなたを理解していれば、あなたはボタンクリックでその子供を含むセクション全体を（）クローンとオリジナルの下にそれを追加したいです。

cloneNode(true)で行うことができますが、フィールド名（入力のものなど）はすべてコピーされることに注意してください。

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>