form中appendChild失效的问题

逃离我推掉我的手 2022-08-21 13:58 168阅读 0赞

本来今天在写一个算是比较简单地队列效果，本来打算两个小时搞定，然而，加找问题出现的原因，查资料，复习正则，一共写了将近五个小时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`的默认行为来达到添加节点的目的，代码如下

参考资料：[http://bbs.csdn.net/topics/390425874][http_bbs.csdn.net_topics_390425874]

[http_bbs.csdn.net_topics_390425874]: http://bbs.csdn.net/topics/390425874