Javascript 克隆的div在追加子项后消失

我正在尝试添加一个复制函数来克隆并附加一个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>

1.
新线
新嵌套行
添加输入

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

我不能修改HTML中的任何内容，我只能使用vanilla JS

---

谢谢

按钮

默认类型为

提交

。当没有指定类型时，它将充当提交按钮&在您的情况下，它试图进行post调用。您可以打开开发者控制台并检查网络选项卡。为了防止这种使用

preventDefault（）

---

按钮

默认类型为

提交

。当没有指定类型时，它将充当提交按钮&在您的情况下，它试图进行post调用。您可以打开开发者控制台并检查网络选项卡。为了防止这种使用

preventDefault（）

只需使用type=“button”

新行
新嵌套行

只需使用type=“button”

新行
新嵌套行

我想（我不确定），每次你点击按钮，

表单

都会被提交，因此页面会重新加载。是的，我是对的。我想（不确定），每次你点击按钮，

表单

都会被提交，因此页面会重新加载。是的，我是对的。我不允许编辑HTML文件。我只能写JS（然后您必须按照@brkI的建议在函数中使用event.preventDefault（）。我刚刚尝试使用@brk的解决方案，它满足了我的需要。谢谢。：）我不允许编辑HTML文件。我只能写JS（然后您必须在函数中使用event.preventDefault（），正如@brkI所建议的那样。我刚刚尝试使用@brk的解决方案，它满足了我的需要。谢谢您。：）

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

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