爲什麼我的HTML按鈕刷新頁面？/爲什麼我不能將我的新HTML DOM元素插入到我的頁面

這應該很簡單，但出於某種原因，我似乎無法使其工作。我對JS很陌生，我一直在使用W3學校學習（雖然我已經發現MDN（Mozilla Developer Network），這已被證明非常有用。爲什麼我的HTML按鈕刷新頁面？/爲什麼我不能將我的新HTML DOM元素插入到我的頁面

我試圖創建一個新的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（開發環境）中......任何人對潛在原因有任何想法？

編輯：顯然代碼工作在我的最後。但是，添加元素後，我的瀏覽器會立即刷新 - 並刪除元素。由於我的刷新速度太快，我沒有看到變化。任何人都知道爲什麼+會使瀏覽器刷新？

來源

2016-03-01 Brandon S.

'1'是一個HTML元素的無效的標識符。它必須以非數字字符開頭。 –

@GeraldSchneider不符合HTML5的[spec]（https://www.w3.org/TR/html5/dom.html#the-id-attribute）。在HTML4中，數字標識是非法的，但現在不再了。 –

對，我一直忘記這是在HTML5中添加的。但這可能是關鍵，如果開發環境使用HTML4，它可以解釋爲什麼它在這裏工作。 –

你的頁面重新加載，因爲按鈕提交表單。

默認情況下，提交將重新加載頁面以顯示錶單錯誤或提交操作的結果。正如您發現的那樣，最簡潔的修復方法是指定一個按鈕類型。

<button type="button">

，而不是你

<button type="submit">

來源

2016-03-01 15:27:55

點擊按鈕後，HTML頁面立即刷新。由於我的網絡和加載時間很快，我沒有注意到任何事情正在發生。

的代碼實際上是在XAMPP工作得很好，它只是在做以下操作：

加載頁面 - >用戶點擊按鈕 - >插入DIV->立即刷新（刷新太快看「插入DIV」發生）

我找到的原因是，如果您沒有在HTML按鈕中包含「type」屬性，它將刷新頁面。因此，解決方案是包含「類型=‘按鈕’」像這樣的HTML標籤按鈕的屬性：

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

來源

2016-03-01 15:06:11

你說得對，「類型」是你問題的根源，但你知道爲什麼嗎？按鈕的默認'類型'是'submit'，它使用GET將表單發送到您的服務器（除非您的表單標記請求發佈，或者您有其他可能使用POST的其他事件）。其他按鈕類型爲「重置」，這將允許您在首次加載頁面時將窗體重置爲其初始值。 – 2016-03-01 15:25:36

爲什麼我的HTML按鈕刷新頁面？/爲什麼我不能將我的新HTML DOM元素插入到我的頁面

回答

相關問題