创：9_3_2017 星期4
修：
对于在a标签中，如何阻止跳转？
定义一个事件，事件顺序执行后才执行跳转，如果事件函数返回false，则后面事件就不触发
事件1 = “return 函数（）；”
函数多出一句 return false；
这样可以做到前端验证
需求1，点击按钮一下，按钮变成新标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>嘻嘻</title> 6 7 </head> 8 <body> 9 <div > 10 <a href="http://www.baidu.com" id="a" onclick="return Create_b();">创建标签</a> 11 </div> 12 <script> 13 function Create_b() { 14 // 获得标签 15 var nid =document.getElementById('a'); 16 // 新标签字符串 17 var new_b = '<input type="text">'; 18 // 替换获得标签 19 nid.innerHTML = new_b; 20 // 事件成功后不执行下一个事件 21 return false; } 22 </script> 23 </body> 24 </html>
需求2，点击新建标签按钮，从最前面添加标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>嘻嘻</title> 6 7 </head> 8 <body> 9 <div> 10 11 <a href="http://www.baidu.com" id="a" onclick="return Create_b1();">创建标签</a> 12 13 </div> 14 15 <script> 16 function Create_b1() { 17 // 定义新建标签 18 var new_b = '<input type="text">'; 19 // 每次在最前面新建标签 20 a.insertAdjacentHTML("beforeBegin",new_b); 21 return false; 22 } 23 </script> 24 </body> 25 </html>
需求3，前面两者太low了，有个高级的方法么？
有，通过创建对象添加
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>嘻嘻</title> 6 7 </head> 8 <body> 9 <div > 10 11 <a href="http://www.baidu.com" id="a" onclick="return Create_b();">创建标签</a> 12 13 </div> 14 <script> 15 function Create_b() { 16 // 创建input标签对象 17 var new_b = document.createElement('input'); 18 // 定义type属性 19 new_b.type='text'; 20 // 定义value属性 21 new_b.value = 'hehehe'; 22 // 找到标签 23 var nid = document.getElementById('a'); 24 // 在找到标签后面添加，同一级 25 nid.appendChild(new_b); 26 27 return false; } 28 </script> 29 </body> 30 </html>