原生实现类似jquery append方法

作者:norion时间:2015年9月9日评论次数:0 条

最近在写一个原生的组件,用惯了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的束缚吧。

上一篇: 原生实现滚动条模拟

下一篇:解决requirejs的r.js压缩排除jquery时造成的错误

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注