javascript - Adding new div on button click - Stack Overflow

admin管理员组

文章数量:1324797

**I have seen similar questions but they haven't provided me a close solution. Add the new div <div class="container" id="section"style="border: 1px solid grey;"> and all the tables and fields hold with this div on a button click. I'm trying to append it by following code.

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

Can anyone please help me to sort this out. Thank you in advance.

**I have seen similar questions but they haven't provided me a close solution. Add the new div <div class="container" id="section"style="border: 1px solid grey;"> and all the tables and fields hold with this div on a button click. I'm trying to append it by following code.

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

Can anyone please help me to sort this out. Thank you in advance.

• javascript
• html

Share Improve this question Follow edited Jun 16, 2017 at 10:07 Amiga500 6,1411111 gold badges7070 silver badges119119 bronze badges asked Jun 16, 2017 at 10:03 MaverickMaverick 6922 gold badges22 silver badges1414 bronze badges 2

• I remend assigning the html to a string variable and then just appending it to a div when the button is clicked - sorry I can't be more help, I deal with jQuery which I know is just an extension of JS but the more I use it, the more I forget traditional js xD – treyBake Commented Jun 16, 2017 at 10:05
• Add this code document.getElementById("section")..removeEventListener("click", run); instead of this.removeEventListener("click", run); //remove the original click event – Rakesh Soni Commented Jun 16, 2017 at 10:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If I understand you correctly, you want to clone an entire section (including its children) on a button click and append that below the original.

You can do that with cloneNode(true) - but be aware that it will copy any field names (such as those on inputs).

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>

click inside red square)

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>

本文标签： javascriptAdding new div on button clickStack Overflow