A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks


  今日研读大名鼎鼎的Ext框架源码,开始以为他们的代码一定超复杂难懂,但读了一点才发现,代码写的非常清晰易懂,设计严谨巧妙,确实一帮牛人之作。
废话不多说,说说今日收获:今日读到insertHtml部分发现这个方法其实是实现了兼容FF的insertAdjacentHTML方法,仔细看看感觉挺不错,于是提取出来,便于今后使用。

方法名称:insertHtml(where,el,html)

参数介绍:
where:插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
el:用于参照插入位置的html元素对象
html:要插入的html代码

源码如下:
<script type="text/javascript">
  
<!--
    
function insertHtml(where, el, html){
        where 
= where.toLowerCase();
        
if(el.insertAdjacentHTML){
            
switch(where){
                
case "beforebegin":
                    el.insertAdjacentHTML('BeforeBegin', html);
                    
return el.previousSibling;
                
case "afterbegin":
                    el.insertAdjacentHTML('AfterBegin', html);
                    
return el.firstChild;
                
case "beforeend":
                    el.insertAdjacentHTML('BeforeEnd', html);
                    
return el.lastChild;
                
case "afterend":
                    el.insertAdjacentHTML('AfterEnd', html);
                    
return el.nextSibling;
            }
            
throw 'Illegal insertion point -> "' + where + '"';
        }
  
var range = el.ownerDocument.createRange();
        
var frag;
        
switch(where){
             
case "beforebegin":
                range.setStartBefore(el);
                frag 
= range.createContextualFragment(html);
                el.parentNode.insertBefore(frag, el);
                
return el.previousSibling;
             
case "afterbegin":
                
if(el.firstChild){
                    range.setStartBefore(el.firstChild);
                    frag 
= range.createContextualFragment(html);
                    el.insertBefore(frag, el.firstChild);
                    
return el.firstChild;
                }
else{
                    el.innerHTML 
= html;
                    
return el.firstChild;
                }
            
case "beforeend":
                
if(el.lastChild){
                    range.setStartAfter(el.lastChild);
                    frag 
= range.createContextualFragment(html);
                    el.appendChild(frag);
                    
return el.lastChild;
                }
else{
                    el.innerHTML 
= html;
                    
return el.lastChild;
                }
            
case "afterend":
                range.setStartAfter(el);
                frag 
= range.createContextualFragment(html);
                el.parentNode.insertBefore(frag, el.nextSibling);
                
return el.nextSibling;
            }
            
throw 'Illegal insertion point -> "' + where + '"';
    }

posted on 2007-10-11 16:36 Yemoo'S JS Blog 阅读(3088) 评论(2)  编辑 收藏 引用 所属分类: javascript代码研究

评论

# re: 兼容FF/IE的insertAdjacentHTML方法【Ext2学习总结】 2008-10-21 09:09 sss
可是我在ff下试了一下咋还是不行呢?  回复  更多评论
  

# re: 兼容FF/IE的insertAdjacentHTML方法【Ext2学习总结】 2009-05-20 00:34 flying19880517
火狐可以的  回复  更多评论
  

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