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

http://www.jb51.net/article/12856.htm

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";
form.appendChild(div);

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

    div.appendChild(button);
    form.appendChild(div);   
}
add();