javascript - 表单内的两个冲突按钮

Question

所以我有一个 <form>与一个<input>它里面的元素。

我还有两个按钮，<button onclick="addActivity()">Add Form</button><br>就是调用append()功能。另一个按钮是 <input type="submit" name="submit" value="submit">是一个提交按钮，它将把我重定向到 display.php。

为什么每次点击<button onclick="addActivity()">Add Form</button><br>都是，它会将我重定向到 display.php 吗？

function append() {
  var newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "number");
  document.getElementById("activity-div").appendChild(newInput);
}

<form class="" action="display.php" method="post">
  <div id="activity-div" class="activity-div">
    Choose a number:<br>
    <input type="number" name="num" min="0" max="10"><br>
  </div>

  <button onclick="append()">Add Form</button><br>
  <input type="submit" name="submit" value="submit">
</form>

当我将该按钮转移到 <form> 之外时它起作用了，但我希望该按钮显示在提交按钮上方。

function append() {
  var newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "number");
  document.getElementById("activity-div").appendChild(newInput);
}

<form class="" action="display.php" method="post">
  <div id="activity-div" class="activity-div">
    Choose a number:<br>
    <input type="number" name="num" min="0" max="10"><br>
  </div>

  <input type="submit" name="submit" value="submit">
</form>
<button onclick="append()">Add Form</button><br>

代码有冲突吗？有没有更好的方法在 javascript 中实现它？

Answer 1

将其更改为:

<input type="button" onclick="append()" value="Add Form" />

并添加:

e.preventDefault();

在 append() 函数中。

function append(){
  e.preventDefault();
  // your code
}