Question

我正在尝试添加一个重复的函数来克隆并附加一个div。这是JS：

 sinPlay[f_, { start_, end_},  baseFreq_] := EmitSound[ Play[Sin[x *baseFreq* f[x]], {x,start,end}]]

和HTML：

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

CodePen Link

这个想法是，当您单击“新行”按钮时，将克隆一个新的“表单块”并将其附加到第一个“表单块”下。但是，如果您现在单击“新行”按钮，新块会短暂显示然后消失。我无法弄清楚原因。

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

谢谢！

Answer 1

button默认类型为submit。如果没有指定类型，它将作为提交按钮＆amp;在你的情况下，它正试图打一个电话。您可以打开开发人员控制台并检查网络选项卡。为了防止这种使用 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

Answer 2

只需使用type =“button”

即可

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

克隆的div在appendChild后消失

2 个答案: