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

Question

This should be really simple, but for some reason I just can't seem to get it to work. I'm very new to JS, and I've mostly been using W3 schools to learn (although I've since discovered to MDN ( Mozilla Developer Network ), which has proven very useful.

I'm trying to create a new div, append several children to it, and then insert the new div into an HTML form.

Currently I was just trying to run a few test cases make sure that I can get the basic JS working. And I don't know what I'm doing wrong. Does anyone know where I'm messing up here?

 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: This question took a really strange turn... my code works perfectly on stack overflow...but not in XAMPP (dev environment)... Anyone have any ideas about potential causes?

EDIT: Apparently the code is working on my end. But my browser refreshes immediately after the element is added--and removes the element. Because my refresh rate was too fast I didn't see the change. Anybody know why + would make the browser refresh?

Answer 1

Your page is reloading because the button is submitting your form.

The submit will, by default, re-load the page to show form errors or the result of the submit action. The cleanest fix is, as you discovered, to specify a button type.

<button type="button">

instead of your

<button type="submit">

Answer 2

The HTML page was refreshing immediately after hitting the button. Because my network and load times were fast I didn't notice that anything was happening.

The code actually works just fine in XAMPP, it was just doing the following:

Load Page->User Clicks Button->Insert DIV->Immediate Refresh (Refreshes too quickly to see "Insert DIV" happening)

The reason for this I found is that, if you don't include a "type" attribute on an HTML button, it will refresh the page. Thus the solution was to include 'type="button"' as an attribute to the HTML button tag like so:

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