javascript - 克隆的div在appendChild后消失

Question

我正在尝试添加一个重复函数来克隆并附加一个 div。这是 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);

和 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

这个想法是，当您单击“新行”按钮时，会克隆一个新的“表单 block ”并将其附加到第一个“表单 block ”下方。但是，如果您现在单击“新行”按钮，新 block 会短暂显示然后消失。我不明白为什么。

我无法修改 HTML 中的任何内容，只能使用普通 JS。

谢谢!

Answer 1

按钮默认类型是提交。当没有指定类型时，它将充当提交按钮，在您的情况下，它会尝试进行后调用。您可以打开开发人员控制台并检查网络选项卡。为了防止这种情况的使用 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