为什么我的 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

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

该代码实际上在 XAMPP 中运行良好，它只是执行以下操作：

加载页面->用户点击按钮->插入 DIV->立即刷新（刷新速度太快，看不到 "Insert DIV" 发生）

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

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

Answer 2

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

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

<button type="button">

而不是你的

<button type="submit">

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

Why do my HTML buttons refresh the page?/Why can't I get my new HTML DOM Element to insert into my page

html

javascript

xampp