为什么我的 HTML 按钮会刷新页面？/为什么我不能将新的 HTML DOM 元素插入到我的页面中

Question

这应该很简单，但由于某种原因，我似乎无法让它工作。我对 JS 很陌生，而且我大部分时间都在使用 W3 学校来学习（尽管后来我发现了 MDN (Mozilla Developer Network)，这已被证明非常有用。

我正在尝试创建一个新 div，将几个子元素添加到其中，然后将新 div 插入 HTML 表单。

目前我只是尝试运行一些测试用例，以确保我可以让基本的 JS 正常工作。而且我不知道我做错了什么。有谁知道我在哪里搞砸了？

function AddQueryBox(){
    window.alert("Add QueryBox");
    var NewQBox = document.createElement('div');
    document.createElement('div');
    NewQBox.appendChild(document.createTextNode("Testing"));
    document.getElementById("1").appendChild(NewQBox);
    //document.body.appendChild(NewQBox);
}

<div align="right" id="1">
  <select onchange="SwitchDatabaseSet()" name="DBSetList" form="DBSetSelector" id="DBSetSelector">
    <option value="' . $DBSet->DBSetName . '">OPTION</option>
    <option value="' . $DBSet->DBSetName . '">Option</option>
  </select>
</div>

<Form>
  <div>
    <div class="QueryBox" name="QBox">
        <select>
          <option>Option</option>
        </select>
        <input type="text"></input>
        <button>-</button>
    </div>
      <div><button onclick="AddQueryBox()">+</button></div>
  </div>
</Form>

DERAIL：这个问题出现了一个非常奇怪的转折……我的代码在堆栈溢出时完美运行……但在 XAMPP（开发环境）中却不行……有人对潜在原因有任何想法吗？

编辑：显然代码对我有用。但是我的浏览器在添加元素后立即刷新 - 并删除了元素。因为我的刷新率太快，我没有看到变化。有人知道为什么 + 会使浏览器刷新吗？

Answer 1

您的页面正在重新加载，因为该按钮正在提交您的表单。

默认情况下，提交将重新加载页面以显示表单错误或提交操作的结果。如您所见，最简洁的解决方法是指定按钮类型。

<button type="button">

而不是你的

<button type="submit">

Answer 2

点击按钮后 HTML 页面立即刷新。因为我的网络和加载时间很快，我没有注意到发生了什么。

代码实际上在 XAMPP 中工作得很好，它只是做了以下事情：

加载页面->用户点击按钮->插入 DIV->立即刷新（刷新太快，无法看到“插入 DIV”发生）

我发现这样做的原因是，如果您没有在 HTML 按钮上包含“类型”属性，它将刷新页面。因此，解决方案是将 'type="button"' 作为 HTML 按钮标签的属性，如下所示：

<div><button type="button" onclick="AddQueryBox()">+</button></div>