标签：
insertAdjacentHTML()有两个参数，第一个参数为位置属性，第二个参数为待插入的标记字符串。且第一个参数为具有以下值之一的字符串：“beforebegin”、"afterbegin"、"beforeend"、"afterend"，这些值插入点为：
(beforebegin) <div id="target"> (afterbegin) This is the element content (beforeend) </div> (afterend)
注意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
使用insertBefore实现insertAdjacentHTML()
标签：
原文地址：http://www.cnblogs.com/-------perfect/p/4719641.html
