為什么我的HTML按鈕刷新頁面？/為什么我不能將新的HTML DOM元素插入頁面中？

Question

這應該真的很簡單，但是由於某種原因，我似乎無法使其正常工作。 我是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> 

DERAIL：這個問題發生了一個非常奇怪的轉折……我的代碼在堆棧溢出時完美地工作了……但是在XAMPP（開發環境）中卻沒有……任何人都對潛在原因有任何想法？

編輯：顯然，代碼在我這端工作。 但是添加元素后，我的瀏覽器會立即刷新-並刪除該元素。 因為刷新速度太快，所以我看不到變化。 有人知道為什么+會使瀏覽器刷新嗎？

Answer 1

您的頁面正在重新加載，因為該按鈕正在提交您的表單。

默認情況下，提交將重新加載頁面以顯示表單錯誤或提交操作的結果。 如您所見，最干凈的解決方法是指定按鈕類型。

<button type="button">

而不是你的

<button type="submit">

Answer 2

按下按鈕后，HTML頁面立即刷新。 因為我的網絡和加載時間都很快，所以我沒有發現任何事情發生。

該代碼實際上在XAMPP中可以正常工作，它只是在執行以下操作：

加載頁面->用戶點擊按鈕->插入DIV->立即刷新（刷新太快，以至於無法看到“插入DIV”的發生）

我發現此問題的原因是，如果您在HTML按鈕上不包含“ type”屬性，它將刷新頁面。 因此，解決方案是將“ type =“ button””作為HTML按鈕標簽的屬性包括在內，如下所示：

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