js表单内如何动态添加元素

已经在form内动态添加了一个div，该div中包含一个button，我希望点击button之后，这个div中动态添加一个text。但是点击完button之后，页面就自动刷新所有元素消失不见？请问各位大神是什么原因？？
代码如下：

function add(){
var form = document.getElementById("form");
var div = document.createElement("div");
    div.style.border = "1px #CCC";
    div.style.borderStyle = "dashed";
    div.style.width = "200px";
    div.style.height = "200px";

var button = document.createElement("button");
    button.innerHTML = "再添加";      
    button.addEventListener(onclick, function() {
        var text = document.createElement("input");
            text.type = "text";  
            div.appendChild(text);                      
    })
    div.appendChild(button);

 form.appendChild(div);