Adding new div on button click

Question

**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 recommend 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
– 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
– Rakesh Soni, Commented Jun 16, 2017 at 10:10

Alcinator · Accepted Answer · 2017-06-16 10:51:15Z

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>

Pasha K · Accepted Answer · 2017-06-16 10:10:41Z

1

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>

answered Jun 16, 2017 at 10:10

Pasha K

4072 silver badges7 bronze badges

1 Comment

Maverick Over a year ago

Thanks for your time.This is not what I am lookin for. Consider a table. I am adding my fiddle here. jsfiddle.net/9qene19o There is a button called " Add Section " when clicked entire div has to repeat.

Collectives™ on Stack Overflow

Adding new div on button click

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related