Question

这应该非常简单，但出于某种原因，我似乎无法让它发挥作用。我对JS很新，而且我大多数时候都在使用W3学校学习（虽然我已经发现了MDN（Mozilla Developer Network），这已被证明是非常有用的。

我尝试创建一个新div，向其中添加几个子节点，然后将新div插入HTML表单。

目前我只是尝试运行一些测试用例，确保我可以使用基本的JS工作。而且我不知道自己做错了什么。有谁知道我在这里弄乱了什么？

＆＃13;

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

＆＃13;

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

＆＃13;

DERAIL：这个问题出现了一个非常奇怪的转变...我的代码完全适用于堆栈溢出...但不是在XAMPP（开发环境）中......任何人对潜在原因都有任何想法？

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

Answer 1

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

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

<button type="button">

代替你的

<button type="submit">

Answer 2

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

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

加载页面 - ＆gt;用户点击按钮 - ＆gt;插入DIV-＆gt;立即刷新（刷新太快以查看＆＃34;插入DIV＆＃34;正在发生）

我找到的原因是，如果你不包含＆＃34;类型＆＃34;属性在HTML按钮上，它将刷新页面。因此，解决方案是包括＆＃39; type =＆＃34; button＆＃34;＆＃39;作为HTML按钮标记的属性，如：

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

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

2 个答案: