Cloned div disappears after appendChild

Question

I'm trying to add a duplicate function to clone and append a div. Here's the JS:

function NL(){
  var original = document.getElementsByClassName('form-block')[0];
  var clone=original.cloneNode(true);
  document.getElementsByTagName('form')[0].appendChild(clone);
}

document.getElementsByClassName('new-line')[0].addEventListener('click',NL);

and the HTML:

<form class='myform'>
  <div class='form-block'>
    <span class='line'>1</span>
    <button class='new-line'>New Line</button>
    <button class='new-nested'>New Nested Line</button>
    <input class='input' type='text' placeholder='Enter Value...'>
    <button class='new-input'>Add input</button>
  </div>
</form>

CodePen Link

The idea is when you click the "New Line" button, a new 'form-block' is cloned and appended under the first one. But if you click on the "New Line" button now, the new block shows up briefly and then disappears. I can't figure out why.

I can't modify anything in the HTML, and I can only use vanilla JS.

Thanks!

I think (am not sure), every time you click the button, the `form` gets submitted and hence the page reloads. Yep, I was right. http://stackoverflow.com/questions/4667979/whats-the-standard-behavior-when-button-tag-click-will-it-submit-the-form — Gaurang Tandon, Mar 25 '17 at 03:04

score 3 · Accepted Answer · answered Mar 25 '17 at 03:06

button default type is submit. When there is no type specified it will act as a submit button & in your case it is trying to make a post call. You can open the developers console and check the network tab. In order to prevent that use preventDefault()

function NL(event){
event.preventDefault()  // Here is the change
  var original = document.getElementsByClassName('form-block')[0];
  var clone=original.cloneNode(true);
  document.getElementsByTagName('form')[0].appendChild(clone);
}

document.getElementsByClassName('new-line')[0].addEventListener('click',NL);

DEMO

score 2 · Answer 2 · answered Mar 25 '17 at 03:06

2

Just use type="button"

<button type="button" class='new-line'>New Line</button>
<button type="button" class='new-nested'>New Nested Line</button>

answered Mar 25 '17 at 03:06

Redhya

663
7
21

I'm not allowed to edit the HTML file. I can only write the JS. :( – Bismo Funyuns Mar 25 '17 at 03:10
then you have to use event.preventDefault() in your function as suggested by @brk – Redhya Mar 25 '17 at 03:11
I just tried using @brk's solution and it did what I needed. Thank you though. :) – Bismo Funyuns Mar 25 '17 at 03:14

Cloned div disappears after appendChild

2 Answers2