为什么我的 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 元素 DOM 插入 刷新 按钮 不能      更新时间：2023-09-26
这

应该非常简单，但由于某种原因，我似乎无法让它工作。我对JS很陌生，我主要使用W3学校来学习（尽管我已经发现了MDN（Mozilla开发人员网络），这已被证明非常有用。

我正在尝试创建一个新的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>

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

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

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

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

<button type="button">

而不是你的 

<button type="submit">

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

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

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

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

<div><button type="button" onclick="AddQueryBox()">+</button></div>
相关文章：