zoukankan      html  css  js  c++  java
  • FF下支持IE特有的insertAdjacentElement以及insertAdjacentHTML

    网摘:

    在ie下这连个函数主要是向目标元素对象插入一个新的子元素,子元素可以使element也可以是html代码片段

    由于FF中没有这两个函数,因此我们可以通过扩展HTMLElement来解决这个问题:

    if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
    {
         HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
         {
            switch (where)
            {
                case 'beforeBegin':
                    this.parentNode.insertBefore(parsedNode,this)
                    break;
                case 'afterBegin':
                    this.insertBefore(parsedNode,this.firstChild);
                    break;
                case 'beforeEnd':
                    this.appendChild(parsedNode);
                    break;
                case 'afterEnd':
                    if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
                        else this.parentNode.appendChild(parsedNode);
                    break;
             }
         }
    
         HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
         {
             var r = this.ownerDocument.createRange();
             r.setStartBefore(this);
             var parsedHTML = r.createContextualFragment(htmlStr);
             this.insertAdjacentElement(where,parsedHTML)
         }
    
         HTMLElement.prototype.insertAdjacentText = function (where,txtStr)
         {
             var parsedText = document.createTextNode(txtStr)
             this.insertAdjacentElement(where,parsedText)
         }
    }

    使用的方法很简单:

        if(e.insertAdjacentElement)
            {
                e.insertAdjacentElement("beforeEnd" , el);
            }
            else
            {
                e.insertAdjacentHTML("beforeEnd" , el.outerHTML);
            }
  • 相关阅读:
    课件的引子
    用nc做网络压力测试
    分布式计算学习笔记
    静态库 .a 转成共享库 .so
    nmon用法
    eclipse debug URLClassPath.getLoader(int) file
    sodu 命令场景分析
    俩孩随笔
    深度学习丨深度学习中GPU和显存分析
    语义分割丨DeepLab系列总结「v1、v2、v3、v3+」
  • 原文地址:https://www.cnblogs.com/tatame/p/2777185.html
Copyright © 2011-2022 走看看