js_8_dom标签

创：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>

 

posted @ 2017-06-13 18:54  梦_鱼  阅读(172)  评论(0)  编辑  收藏  举报