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()。
- appendChild()方法是在需要插入的Element节点上调用的，它插入指定的节点使用其成为那个节点的最后一个节点。
- 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