原生实现类似jquery append方法

作者:沙师弟时间:2015-09-10
最近在写一个原生的组件,用惯了jquery方式用原生感觉好不习惯(不小心暴露了战斗力5的级别),特别如果是要兼容多种浏览器还要考虑兼容性,还好要我写的不用这么做兼容,但是在创建标签的时候就很不方便。 之前用的很溜的jquery append方法直接在append传入html字符串就可以直接生成,如:
$('#test').append('<div class="testChildren">xxx</div>');
如果改用原生的写:
var test      = document.getElementById('test'),
    testChild = document.createElement('div');
testChild.className   = 'testChildren';
testChild.textContent = 'xxx';
test.appendChild(testChild);
瞬间觉的好无力有木有~~,这个时候就很怀恋用库了有木有~~ 那,怎么从不用库而从中解脱呢,自然是自己封装个方法就好了:
function append(ele, html){
    var tmp      = document.createElement('div'),      //创建一个临时Element
        fragment = document.createDocumentFragment();  //创建一个口袋
     
    tmp.innerHTML = html; //解脱的源头

    for(var i = 0, children = tmp.children, len = children.length; i<len; i++){
        fragment.appendChild(children[i]); //装米喽,把临时Element中的大米都装到口袋里
    }

    ele.appendChild(fragment); //插入

    children = null;
    fragment = null;
    tmp      = null;

    return ele;
}
其中,jquery也可以prepend用这种方法做,来吧一起摆脱jquery的束缚吧。