document fragment DOM append

dom_fragment_append.js

window.onload = function() {
    //create DocumentFragment
    var documentFragment = document.createDocumentFragment();
 
    var list = document.getElementById( 'list' ); //<ul id="list"></ul>
    var item = null;
 
    //suppose this json is returned from ajax call
    var ajaxResponse = [
        { 'name' : 'Haiku' },
        { 'name' : 'Linux' },
        { 'name' : 'OS X' },
        { 'name' : 'Windows' }
    ];
 
    //add all names in ajaxReponse to documentFragment
    for( var i in ajaxResponse ) {
        item = document.createElement( 'li' );
        item.appendChild( document.createTextNode( ajaxResponse[ i ].name ) );
        documentFragment.appendChild( item );
    }
 
    //append all items in documentFragment to list
    list.appendChild( documentFragment );
}