form中appendChild失效的问题

本文主要是介绍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);
}