道非道 非常道

勤思、谨言、慎行、厚积、薄发

统计

web

天圆

经济 政治 军事

键康

[转] 兼容IE、FF的insertAdjacentHTML方法

 1 
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 3 <HTML>
 4     <HEAD>
 5         <TITLE>New Document</TITLE>
 6         <META NAME="Generator" CONTENT="EditPlus">
 7         <META NAME="Author" CONTENT="">
 8         <META NAME="Keywords" CONTENT="">
 9         <META NAME="Description" CONTENT="">
10         <script type="text/javascript">  
11     <!--  
12       function insertHtml(where, el, html){  
13           where = where.toLowerCase();  
14           if(el.insertAdjacentHTML){  
15               switch(where){  
16                  case "beforebegin":  
17                      el.insertAdjacentHTML('BeforeBegin', html);  
18                    return el.previousSibling;  
19                 case "afterbegin":  
20                     el.insertAdjacentHTML('AfterBegin', html);  
21                     return el.firstChild;  
22                 case "beforeend":  
23                     el.insertAdjacentHTML('BeforeEnd', html);  
24                      return el.lastChild;  
25                  case "afterend":  
26                      el.insertAdjacentHTML('AfterEnd', html);  
27                     return el.nextSibling;  
28              }  
29              throw 'Illegal insertion point -> "' + where + '"';  
30           } else {  
31                var range = el.ownerDocument.createRange();  
32                var frag;  
33                switch(where){  
34                     case "beforebegin":  
35                       range.setStartBefore(el);  
36                        frag = range.createContextualFragment(html);  
37                       el.parentNode.insertBefore(frag, el);  
38                        return el.previousSibling;  
39                    case "afterbegin":  
40                       if(el.firstChild){  
41                           range.setStartBefore(el.firstChild);  
42                            frag = range.createContextualFragment(html);  
43                           el.insertBefore(frag, el.firstChild);  
44                           return el.firstChild;  
45                       }else{  
46                            el.innerHTML = html;  
47                            return el.firstChild;  
48                      }  
49                   case "beforeend":  
50                       if(el.lastChild){  
51                          range.setStartAfter(el.lastChild);  
52                          frag = range.createContextualFragment(html);  
53                          el.appendChild(frag);  
54                          return el.lastChild;  
55                        }else{  
56                           el.innerHTML = html;  
57                            return el.lastChild;  
58                      }  
59                 case "afterend":  
60                       range.setStartAfter(el);  
61                      frag = range.createContextualFragment(html);  
62                      el.parentNode.insertBefore(frag, el.nextSibling);  
63                      return el.nextSibling;  
64                   }  
65                    throw 'Illegal insertion point -> "' + where + '"';  
66          }  
67     }  
68        
69      -->  
70   </script>
71     </HEAD>
72 
73     <BODY>
74         <div id="aa">
75             click the button to insertAdjacentHTML
76             <br />
77         </div>
78         <input type="button" value='add' onclick="add();" />
79     </BODY>
80 </HTML>
81 <SCRIPT LANGUAGE="JavaScript">  
82    <!--  
83    var index = 0;  
84    function add() {  
85        insertHtml("afterBegin",document.getElementById("aa"),"<input type='text' value=" + index++ + " /><br/>");  
86        insertHtml("beforeEnd",document.getElementById("aa"),"<input type='text' value=" + index++ + " /><br/>");  
87    }  
88   //-->  
89    </SCRIPT>
90 

posted on 2009-07-31 11:15 星期五 阅读(351) 评论(0)  编辑  收藏 所属分类: web 2.0


只有注册用户登录后才能发表评论。


网站导航: