原生js--insertAdjacentHTML
insertAdjacentHTML是IE浏览器提供向DOM中插入html字符串的方法，字符串会自动生成在DOM树中。
其调用方式为elem.insertAdjacentHTML( position, htmlStr )
elem 向哪个DOM的标签出插入字符串
position 有四个选项 "beforeBegin" "afterEnd" "afterBegin" "beforeEnd"分别指在elem的开始标签之前、结束标签之后、开始标签之后、结束标签之前插入htmlStr
htmlStr 字符串（不是DOM元素）
以下是在《javascript权威指南》中摘抄的，重新封装并重命名了该功能的Insert对象。并同时解决insertAdjacentHTML的浏览器兼容性问题
/**
* 在开始或结束标签的前后插入html字符串
* before
在开始标签之前插入html字符串
* after 在结束标签之后插入html字符串
* atStart
在开始标签之后插入字符串
* atEnd 在结束标签之前插入字符串
*/
Insert = (
function(){
if( document.createElement( "div"
).insertAdjacentHTML ){
return
{
// e element, h
html
before :
function( e, h ){
// beforebegin大小写均可， h {string}
html字符串或text均可
e.insertAdjacentHTML( "beforebegin", h
);
},
after :
function( e, h ){
e.insertAdjacentHTML( "afterend", h );
},
atStart : function( e, h
){
e.insertAdjacentHTML( "afterbegin", h );
},
atEnd : function( e, h
){
e.insertAdjacentHTML( "beforeEnd", h );
}
};
}
function fragment(
html ){
var tmpDiv =
document.createElement( "div" ),
frag =
document.createDocumentFragment();
tmpDiv.innerHTML = html;
while(
tmpDiv.firstChild ){
frag.appendChild( tmpDiv.firstChild );
}
return frag;
}
var Insert = {
before : function( e, h ){
e.parentNode.insertBefore( fragment(
h ), e );
},
after : function( e, h ){
//
当e.nextSibling为空时，insertBefore方法会将frament(h)插入到最后
e.parentNode.insertBefore( fragment(
h ), e.nextSibling );
},
atStart : function( e, h
){
e.insertBefore(
fragment( h ), e.firstChild );
},
atEnd :
function(){
e.appendChild( fragment( h ) );
}
};
//
同时解决insertAdjacentHTML的兼容性问题
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;
}()
);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
