你的位置:首页 > Java教程

[Java教程]使用insertBefore实现insertAdjacentHTML()


  • Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置。

  insertAdjacentHTML()有两个参数,第一个参数为位置属性,第二个参数为待插入的标记字符串。且第一个参数为具有以下值之一的字符串:“beforebegin”、"afterbegin"、"beforeend"、"afterend",这些值插入点为:

  (beforebegin) <div id="target"> (afterbegin) This is the element content  (beforeend) </div> (afterend)

  • 插入节点的为Node的方法appendChild()insertBefore()

  1. appendChild()方法是在需要插入的Element节点上调用的,它插入指定的节点使用其成为那个节点的最后一个节点。
  2. insertBefore()方法是新节点的父节点上调用并接受两个参数。第一个参数是待插入的节点,第二个参数是已存在的节点,新节点将插入到该节点的前面。如果第二个参数为null,其行为和appendChild()一样。
  • DocumentFragment是一种特殊的Node,它作为其他节点的一个临时的容器。  

  注意documentFrament的parentNode总是为null。如果给appendChild()、insertBefore()、replaceChild()传递一个DocumentFragment,其实是将该文档片段的所有子节点插入到文档中,而非片段本身。

为了使insertAdjacentHTML()方法兼容所有浏览器,并给它定义了一组更符合逻辑的名字,使用insertBefore()实现Insert.before(),Insert.after(),Insert.atAfter(),Insert.atEnd()方法。代码如下:

var Insert=(function(){  //如果元素有原生的insertAdjacentHTML,  //在4个函数名了的HTML插入函数中直接使用  if(document.createElement("div").insertAdjacentHTML){    return {      before:function(e,h){e.insertAdjacentHTML("beforebegin",h);},      after:function(e,h){e.insertAdjacentHTML("afterend",h);},      atStart:function(e,h){e.insertAdjacentHTML("beforebegin",h);},      atEnd:function(e,h){e.insertAdjacentHTML("afterend",h);}    };  }  //浏览不支持insertAdjacentHTML则通过insertBefor来实现  function fragment(html){    var elt=document.createElement("div");      //创建空文档    var frag=document.createDocumentFragment();    //创建空文档片段    elt.innerHTML=html;                //设置文档内容    while(elt.firstChild)              //移动所有的节点      frag.appendChild(elt.firstChild);    return frag;  }    var Insert={    before:function(elt,html){      elt.parentNode.insertBefore(frament(html),elt);    },    after:function(elt,html){      elt.parentNode.insertBefore(fragment(html),elt.nextSibling);    },    atStart:function(elt,html){      elt.insertBefore(fragment(html),elt.firstChild);    },    atEnd:function(elt,html){      elt.insertBefore(fragment(html));      //insertBefore第二参数为null时,其行为类似于appendHTML(),它将节点插入到最后。    }  }    Element.prototype.insertAdjacentHTML=function(pos,html){    switch(pos.toLowerCase()){      case "beforebegin":return Insert.before(this,html);      case "afterend":return Insert.after(this,html);      case "afterbegin":return Insert.atStart(this,html);      case "beforeend":return Insert.atEnd(this,html);    }  }  return Insert;}());

  引自《JavaScript权威指南》 15.6