捉虫随记 -- button标签点击后导致页面刷新

问题描述

　　今天做DOM元素的节点添加练习，主要是点击button按钮后将元素添加到页面中，但是写完代码后怎么都添加不上新元素。

问题分析

　　在确保代码逻辑没有问题后发现，点击button后新元素确有添加到页面中，但该操作同时也会带来页面刷新，应该是form表单提交（默认行为）的原因，在删除form后页面确实没有再刷新了。

　　这篇博客里也提到了这个问题，他表示：

　　button,input type=button按钮在IE和w3c，firefox浏览器区别： 

　　1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。 

　　2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

解决方法 　　

1. 删除<form>标签；

2. 如果无法删除<form>标签，为button按钮增加一个type=”button”属性 同样可以解决点击button导致刷新的问题；

3. 在响应函数的最后加一个 return false 来取消默认行为。

4. (解决<a>点击后跳转问题) 在标签中添加href = " javascript:; " 。

　　因为javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:;表示 什么都不执行，这样点击<a>时就没有任何反应。