form中appendChild失效的问题

本来今天在写一个算是比较简单地队列效果，本来打算两个小时搞定，然而，加找问题出现的原因，查资料，复习正则，一共写了将近五个小时O__O “…。
其实代码结构是非常简单地，如下

    <form>        <fieldset>            <legend>插入</legend>            <input type="text" id="inputNum" placeholder="请输入你想插入的数字" /><span id="notice1">请输入数字！</span><span id="notice2">不能为空！</span><br/>            <button id="leftInput">左侧入</button>            <button id="rightInput">右侧入</button>        </fieldset>        <fieldset>            <legend>移出</legend>            <button id="leftOutput">左侧出</button>            <button id="rightOutput">右侧出</button>        </fieldset>    </form>    <div id="nums" class="nums">    </div>

想要完成的功能只是需要把文本框中的数字获取到，然后新创建一个元素，添加到div#nums中。
于是，就有了以下的JavaScript代码

var leftInput=document.getElementById('leftInput');leftInput.onclick=function(){    var a=document.getElementById('inputNum').value;    var nums=document.getElementById('nums');    var spans=document.createElement('span');    spans.innerHTML=a;    nums.appendChild(spans);}

看着十分正常对吧，按理说运行也是没问题的，但是，最终结果确是：你就点吧，反正他就只闪以下，然后就消失没有踪影，再看F12中的文档结构，也是没有丝毫变化。好吧，这是逼着我打断点啊，打了断点之后发现新创建的span元素确实被添加到nums中过，对，是添加到过。但是为什么会突然有没有了呢，觉得自己还是经验太少，想了好久都毫无头绪。
没办法了，我开始写了一个类似的简单demo，想着一步步看到底哪里的问题，因为想省事，所以没有加form标签，奇怪的事发生了，其他任何代码都没变，突然就可以正常添加了。让我静静O__O “…
终于找到了问题根源，于是开始上网找资料，发现主要原因在于按钮本身的默认事件上。button在点击之后默认会向服务器提交数据，然后再重新刷新一次页面，最终导致只是闪了一下，而没有显示在页面上。
为了解决这个问题，我们可以通过阻止button的默认行为来达到添加节点的目的，代码如下

var leftInput=document.getElementById('leftInput');leftInput.onclick=function(ev){    var e=ev||window.event;    if(e.preventDefault){        e.preventDefault();//FF等阻止DOM节点默认行为，这里是提交表单的行为        e.stopPropagation();    }else{        e.cancelBubble = true;//IE阻止事件冒泡        e.returnValue = false;//IE阻止DOM节点默认行为，这里是提交表单的行为    }    var a=document.getElementById('inputNum').value;    var nums=document.getElementById('nums');    var spans=document.createElement('span');    spans.innerHTML=a;    nums.appendChild(spans);}

参考资料：http://bbs.csdn.net/topics/390425874