documentFragment appendChild vs jquery append (v43)

Revision 43 of this benchmark created on

Preparation HTML

<div id="test-area" style="height: 75px; width: auto; overflow:scroll">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Teardown


    $('#test-area').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
appendTo
        $('<div>').attr({'id':'kt_publish','class':'kt_publish'}).appendTo($("body));
                $('<div>').attr('id','kt_glass').appendTo($('#kt_publish'));
                $('<div>').attr('id','kt_publishContainer').appendTo($('#kt_publish'));
                        $('<div>').attr('id','kt_publishBody').appendTo($('#kt_publish #kt_publishContainer'));
                                $('<input>').attr({'id':'kt_articleTitle','class':'kt_articleInput','type':'text','placeholder':'Title'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody'));
                                $('<textarea>').attr({'id':'kt_articleBody','class':'kt_articleInput','placeholder':'Add note'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody'));
                                $('<div>').attr('id','kt_publish_tagBody').appendTo($('#kt_publish #kt_publishContainer #kt_publishBody'));
                                        $('<div>').attr({'id':'kt_setLocationContainer','class':'kt_setContainer'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody'));
                                                $('<div>').attr({'id':'kt_setLocationValue','class':'kt_setValue'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setLocationContainer'));
                                                $('<div>').attr({'id':'kt_setLocationRemove','class':'kt_setRemove kt_sprite','onclick':'setLocationRemove()'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setLocationContainer'));
                                        $('<div>').attr({'id':'kt_setTimeContainer','class':'kt_setContainer'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody'));
                                                $('<div>').attr({'id':'kt_setTimeValue','class':'kt_setValue'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setTimeContainer'));
                                                $('<div>').attr({'id':'kt_setTimeRemove','class':'kt_setRemove kt_sprite','onclick':'setTimeRemove()'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setTimeContainer'));
                                        $('<div>').attr({'id':'kt_setAlbumContainer','class':'kt_setContainer'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody'));
                                                $('<div>').attr({'id':'kt_setAlbumValue','class':'kt_setValue'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setAlbumContainer'));
                                                        $('<div>').attr('class','loading').appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setAlbumContainer #kt_setAlbumValue'));
                                                                $('<div>').attr('class','spinner').appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setAlbumContainer #kt_setAlbumValue .loading'));
                                                                        $('<div>').attr('class','mask').appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setAlbumContainer #kt_setAlbumValue .loading .spinner'));
                                                                                $('<div>').attr('class','maskedCircle').appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setAlbumContainer #kt_setAlbumValue .loading .spinner .mask'));
                                                $('<div>').attr({'id':'kt_setAlbumRemove','class':'kt_setRemove kt_sprite','onclick':'setAlbumRemove()'}).appendTo($('#kt_publish #kt_publishContainer #kt_publishBody #kt_publish_tagBody #kt_setAlbumContainer'));
                        $('<div>').attr('id','kt_optionButtonContainer').appendTo($('#kt_publish #kt_publishContainer'));
//                              $('<div>').attr({'id':'kt_camera','class':'kt_optionButton kt_sprite'}).appendTo($('#kt_publish #kt_publishContainer #kt_optionButtonContainer'));
                                $('<div>').attr({'id':'kt_album','class':'kt_optionButton kt_sprite','onclick':'iconImg()'}).appendTo($('#kt_publish #kt_publishContainer #kt_optionButtonContainer'));
//                              $('<div>').attr({'id':'kt_record','class':'kt_optionButton kt_sprite'}).appendTo($('#kt_publish #kt_publishContainer #kt_optionButtonContainer'));
                                $('<div>').attr({'id':'kt_tag','class':'kt_optionButton kt_sprite','onclick':'publish_tag_select()'}).appendTo($('#kt_publish #kt_publishContainer #kt_optionButtonContainer'));
                                        $('<div>').attr('id','kt_tagListContainer').appendTo($('#kt_publish #kt_publishContainer #kt_optionButtonContainer #kt_tag'));
                                                $('<div>').attr({'id':'kt_tagList0','class':'kt_tagList','onclick':'tag_listSelect(this)'}).text('Time').appendTo($('#kt_publish #kt_publishContainer #kt_optionButtonContainer #kt_tag #kt_tagListContainer'));                                
                                                $('<div>').attr({'id':'kt_tagList1','class':'kt_tagList','onclick':'tag_listSelect(this)'}).text('Location').appendTo($('#kt_publish #kt_publishContainer #kt_optionButtonContainer #kt_tag #kt_tagListContainer'));                            
                        $('<div>').attr({'id':'kt_publish_timePanel','class':'kt_publish_tagPanel'}).appendTo($('#kt_publish #kt_publishContainer'));
                                $('<div>').attr('class','kt_publish_tagPanelInner').appendTo($('#kt_publish #kt_publishContainer #kt_publish_timePanel'));
                                        $('<input>').attr({'id':'kt_timeWheel','readonly':'readonly'}).appendTo($('#kt_publish #kt_publishContainer #kt_publish_timePanel .kt_publish_tagPanelInner'));
                                        $('<div>').attr('id','kt_publish_tagPanelBottomContainer').appendTo($('#kt_publish #kt_publishContainer #kt_publish_timePanel .kt_publish_tagPanelInner'));
                                                $('<div>').attr({'class':'kt_tagPanelBottomButton','onclick':'publish_timeSet()'}).text('Set').appendTo($('#kt_publish #kt_publishContainer #kt_publish_timePanel .kt_publish_tagPanelInner #kt_publish_tagPanelBottomContainer'))
                                                $('<div>').attr({'class':'kt_tagPanelBottomButton','onclick':'publish_timeClose()'}).text('Cancel').appendTo($('#kt_publish #kt_publishContainer #kt_publish_timePanel .kt_publish_tagPanelInner #kt_publish_tagPanelBottomContainer'))
                                $('<div>').attr('id','kt_pannelGhost').appendTo($('#kt_publish #kt_publishContainer #kt_publish_timePanel'));
;                       $('<div>').attr({'id':'kt_publish_locationPanel','class':'kt_publish_tagPanel'}).appendTo($('#kt_publish #kt_publishContainer'));
                                $('<div>').attr('class','kt_publish_tagPanelInner').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel'));
                                        $('<select>').attr({'id':'kt_locationWheel','data-role':'none','readonly':'readonly'}).appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel .kt_publish_tagPanelInner'));
                                                $('<option>').attr('value','0').text('Current location').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel .kt_publish_tagPanelInner #kt_locationWheel'));
                                                //get to location list
                                                $('<option>').attr('value','1').text('#My room').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel .kt_publish_tagPanelInner #kt_locationWheel'));
                                                $('<option>').attr('value','2').text('#Room 618').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel .kt_publish_tagPanelInner #kt_locationWheel'));
                                                $('<option>').attr('value','3').text('#Walmart').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel .kt_publish_tagPanelInner #kt_locationWheel'));
                                        $('<div>').attr('id','kt_publish_tagPanelBottomContainer').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel .kt_publish_tagPanelInner'));
                                                $('<div>').attr({'class':'kt_tagPanelBottomButton','onclick':'locationSet()'}).text('Set').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel .kt_publish_tagPanelInner #kt_publish_tagPanelBottomContainer'));
                                                $('<div>').attr({'class':'kt_tagPanelBottomButton','onclick':'locationClose()'}).text('Cancel').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel .kt_publish_tagPanelInner #kt_publish_tagPanelBottomContainer'));
                                $('<div>').attr('id','kt_pannelGhost').appendTo($('#kt_publish #kt_publishContainer #kt_publish_locationPanel'));
                        $('<div>').attr({'id':'kt_publish_currentLocation','class':'kt_publish_tagPanel'}).appendTo($('#kt_publish #kt_publishContainer'));
                                $('<div>').attr({'id':'kt_publish_tagPanel_newLocation','class':'kt_publish_tagPanelInner'}).appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation'));
                                        $('<div>').attr('id','kt_publish_tagPanelHeader').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation'));
                                                $('<div>').attr({'id':'kt_newLocationClose','onclick':'publish_panelClose()'}).appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationIcon').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationTitle').text('New location').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationSub').text('Save new location').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<input>').attr({'id':'kt_newLocationNameInput','type':'text','placeholder':'#New location'}).appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_locationSave').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                        $('<p>').attr('onclick','publish_newLocationSave()').text('Save').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader #kt_locationSave'));
                                                $('<div>').attr('class','loading').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('class','spinner').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader .loading'));
                                                        $('<div>').attr('class','mask').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader .loading .spinner'));
                                                                $('<div>').attr('class','maskedCircle').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader .loading .spinner .mask'));
                                $('<div>').attr('id','kt_pannelGhost').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocation'));
                        $('<div>').attr({'id':'kt_publish_currentLocationComplete','class':'kt_publish_tagPanel'}).appendTo($('#kt_publish #kt_publishContainer'));
                                $('<div>').attr({'id':'kt_publish_tagPanel_newLocation','class':'kt_publish_tagPanelInner'}).appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete'));
                                        $('<div>').attr('id','kt_publish_tagPanelHeader').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation'));
                                                $('<div>').attr('id','kt_newLocationIcon').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationTitle').text('New location').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationSub').text('Location saved').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationResult').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                        $('<div>').attr('id','kt_newLocationName').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader #kt_newLocationResult'));
//                                                      $('<div>').attr('id','kt_newLocationDate').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader #kt_newLocationResult'));
                                                $('<div>').attr('id','kt_locationOk').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                        $('<p>').attr('onclick','publish_newLocationComplete()').text('Ok').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader #kt_locationOk'));
                                $('<div>').attr('id','kt_pannelGhost').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationComplete'));
                        $('<div>').attr({'id':'kt_publish_currentLocationFail','class':'kt_publish_tagPanel'}).appendTo($('#kt_publish #kt_publishContainer'));
                                $('<div>').attr({'id':'kt_publish_tagPanel_newLocation','class':'kt_publish_tagPanelInner'}).appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail'));
                                        $('<div>').attr('id','kt_publish_tagPanelHeader').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail #kt_publish_tagPanel_newLocation'));
                                                $('<div>').attr({'id':'kt_newLocationClose','onclick':'publish_panelClose()'}).appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationIcon').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationTitle').text('New location').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationSub').text('Location save failed').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_locationRetry').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader'));
                                                        $('<p>').attr('onclick','publish_newLocationSave()').text('Retry').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail #kt_publish_tagPanel_newLocation #kt_publish_tagPanelHeader #kt_locationRetry'));
                                $('<div>').attr('id','kt_pannelGhost').appendTo($('#kt_publish #kt_publishContainer #kt_publish_currentLocationFail'));
               
ready
Documnet Fragment
        var documentFragment = $(document.createDocumentFragment());
        
        $('<div>').attr({'id':'kt_publish','class':'kt_publish'}).appendTo(documentFragment);
                $('<div>').attr('id','kt_glass').appendTo(documentFragment.children('#kt_publish'));
                $('<div>').attr('id','kt_publishContainer').appendTo(documentFragment.children('#kt_publish'));
                        $('<div>').attr('id','kt_publishBody').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer'));
                                $('<input>').attr({'id':'kt_articleTitle','class':'kt_articleInput','type':'text','placeholder':'Title'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody'));
                                $('<textarea>').attr({'id':'kt_articleBody','class':'kt_articleInput','placeholder':'Add note'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody'));
                                $('<div>').attr('id','kt_publish_tagBody').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody'));
                                        $('<div>').attr({'id':'kt_setLocationContainer','class':'kt_setContainer'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody'));
                                                $('<div>').attr({'id':'kt_setLocationValue','class':'kt_setValue'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setLocationContainer'));
                                                $('<div>').attr({'id':'kt_setLocationRemove','class':'kt_setRemove kt_sprite','onclick':'setLocationRemove()'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setLocationContainer'));
                                        $('<div>').attr({'id':'kt_setTimeContainer','class':'kt_setContainer'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody'));
                                                $('<div>').attr({'id':'kt_setTimeValue','class':'kt_setValue'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setTimeContainer'));
                                                $('<div>').attr({'id':'kt_setTimeRemove','class':'kt_setRemove kt_sprite','onclick':'setTimeRemove()'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setTimeContainer'));
                                        $('<div>').attr({'id':'kt_setAlbumContainer','class':'kt_setContainer'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody'));
                                                $('<div>').attr({'id':'kt_setAlbumValue','class':'kt_setValue'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setAlbumContainer'));
                                                        $('<div>').attr('class','loading').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setAlbumContainer').children('#kt_setAlbumValue'));
                                                                $('<div>').attr('class','spinner').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setAlbumContainer').children('#kt_setAlbumValue').children('.loading'));
                                                                        $('<div>').attr('class','mask').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setAlbumContainer').children('#kt_setAlbumValue').children('.loading').children('.spinner'));
                                                                                $('<div>').attr('class','maskedCircle').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setAlbumContainer').children('#kt_setAlbumValue').children('.loading').children('.spinner').children('.mask'));
                                                $('<div>').attr({'id':'kt_setAlbumRemove','class':'kt_setRemove kt_sprite','onclick':'setAlbumRemove()'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publishBody').children('#kt_publish_tagBody').children('#kt_setAlbumContainer'));
                        $('<div>').attr('id','kt_optionButtonContainer').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer'));
//                              $('<div>').attr({'id':'kt_camera','class':'kt_optionButton kt_sprite'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_optionButtonContainer'));
                                $('<div>').attr({'id':'kt_album','class':'kt_optionButton kt_sprite','onclick':'iconImg()'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_optionButtonContainer'));
//                              $('<div>').attr({'id':'kt_record','class':'kt_optionButton kt_sprite'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_optionButtonContainer'));
                                $('<div>').attr({'id':'kt_tag','class':'kt_optionButton kt_sprite','onclick':'publish_tag_select()'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_optionButtonContainer'));
                                        $('<div>').attr('id','kt_tagListContainer').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_optionButtonContainer').children('#kt_tag'));
                                                $('<div>').attr({'id':'kt_tagList0','class':'kt_tagList','onclick':'tag_listSelect(this)'}).text('Time').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_optionButtonContainer').children('#kt_tag').children('#kt_tagListContainer'));                                
                                                $('<div>').attr({'id':'kt_tagList1','class':'kt_tagList','onclick':'tag_listSelect(this)'}).text('Location').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_optionButtonContainer').children('#kt_tag').children('#kt_tagListContainer'));                            
                        $('<div>').attr({'id':'kt_publish_timePanel','class':'kt_publish_tagPanel'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer'));
                                $('<div>').attr('class','kt_publish_tagPanelInner').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_timePanel'));
                                        $('<input>').attr({'id':'kt_timeWheel','readonly':'readonly'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_timePanel').children('.kt_publish_tagPanelInner'));
                                        $('<div>').attr('id','kt_publish_tagPanelBottomContainer').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_timePanel').children('.kt_publish_tagPanelInner'));
                                                $('<div>').attr({'class':'kt_tagPanelBottomButton','onclick':'publish_timeSet()'}).text('Set').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_timePanel').children('.kt_publish_tagPanelInner').children('#kt_publish_tagPanelBottomContainer'))
                                                $('<div>').attr({'class':'kt_tagPanelBottomButton','onclick':'publish_timeClose()'}).text('Cancel').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_timePanel').children('.kt_publish_tagPanelInner').children('#kt_publish_tagPanelBottomContainer'))
                                $('<div>').attr('id','kt_pannelGhost').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_timePanel'));
;                       $('<div>').attr({'id':'kt_publish_locationPanel','class':'kt_publish_tagPanel'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer'));
                                $('<div>').attr('class','kt_publish_tagPanelInner').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel'));
                                        $('<select>').attr({'id':'kt_locationWheel','data-role':'none','readonly':'readonly'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel').children('.kt_publish_tagPanelInner'));
                                                $('<option>').attr('value','0').text('Current location').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel').children('.kt_publish_tagPanelInner').children('#kt_locationWheel'));
                                                //get to location list
                                                $('<option>').attr('value','1').text('#My room').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel').children('.kt_publish_tagPanelInner').children('#kt_locationWheel'));
                                                $('<option>').attr('value','2').text('#Room 618').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel').children('.kt_publish_tagPanelInner').children('#kt_locationWheel'));
                                                $('<option>').attr('value','3').text('#Walmart').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel').children('.kt_publish_tagPanelInner').children('#kt_locationWheel'));
                                        $('<div>').attr('id','kt_publish_tagPanelBottomContainer').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel').children('.kt_publish_tagPanelInner'));
                                                $('<div>').attr({'class':'kt_tagPanelBottomButton','onclick':'locationSet()'}).text('Set').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel').children('.kt_publish_tagPanelInner').children('#kt_publish_tagPanelBottomContainer'));
                                                $('<div>').attr({'class':'kt_tagPanelBottomButton','onclick':'locationClose()'}).text('Cancel').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel').children('.kt_publish_tagPanelInner').children('#kt_publish_tagPanelBottomContainer'));
                                $('<div>').attr('id','kt_pannelGhost').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_locationPanel'));
                        $('<div>').attr({'id':'kt_publish_currentLocation','class':'kt_publish_tagPanel'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer'));
                                $('<div>').attr({'id':'kt_publish_tagPanel_newLocation','class':'kt_publish_tagPanelInner'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation'));
                                        $('<div>').attr('id','kt_publish_tagPanelHeader').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation'));
                                                $('<div>').attr({'id':'kt_newLocationClose','onclick':'publish_panelClose()'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationIcon').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationTitle').text('New location').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationSub').text('Save new location').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<input>').attr({'id':'kt_newLocationNameInput','type':'text','placeholder':'#New location'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_locationSave').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                        $('<p>').attr('onclick','publish_newLocationSave()').text('Save').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader').children('#kt_locationSave'));
                                                $('<div>').attr('class','loading').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('class','spinner').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader .loading'));
                                                        $('<div>').attr('class','mask').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader .loading .spinner'));
                                                                $('<div>').attr('class','maskedCircle').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader').children('.loading').children('.spinner').children('.mask'));
                                $('<div>').attr('id','kt_pannelGhost').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocation'));
                        $('<div>').attr({'id':'kt_publish_currentLocationComplete','class':'kt_publish_tagPanel'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer'));
                                $('<div>').attr({'id':'kt_publish_tagPanel_newLocation','class':'kt_publish_tagPanelInner'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete'));
                                        $('<div>').attr('id','kt_publish_tagPanelHeader').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation'));
                                                $('<div>').attr('id','kt_newLocationIcon').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationTitle').text('New location').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationSub').text('Location saved').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationResult').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                        $('<div>').attr('id','kt_newLocationName').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader').children('#kt_newLocationResult'));
//                                                      $('<div>').attr('id','kt_newLocationDate').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader').children('#kt_newLocationResult'));
                                                $('<div>').attr('id','kt_locationOk').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                        $('<p>').attr('onclick','publish_newLocationComplete()').text('Ok').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader').children('#kt_locationOk'));
                                $('<div>').attr('id','kt_pannelGhost').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationComplete'));
                        $('<div>').attr({'id':'kt_publish_currentLocationFail','class':'kt_publish_tagPanel'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer'));
                                $('<div>').attr({'id':'kt_publish_tagPanel_newLocation','class':'kt_publish_tagPanelInner'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail'));
                                        $('<div>').attr('id','kt_publish_tagPanelHeader').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail').children('#kt_publish_tagPanel_newLocation'));
                                                $('<div>').attr({'id':'kt_newLocationClose','onclick':'publish_panelClose()'}).appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationIcon').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationTitle').text('New location').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_newLocationSub').text('Location save failed').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                $('<div>').attr('id','kt_locationRetry').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader'));
                                                        $('<p>').attr('onclick','publish_newLocationSaveRerty()').text('Retry').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail').children('#kt_publish_tagPanel_newLocation').children('#kt_publish_tagPanelHeader').children('#kt_locationRetry'));
                                $('<div>').attr('id','kt_pannelGhost').appendTo(documentFragment.children('#kt_publish').children('#kt_publishContainer').children('#kt_publish_currentLocationFail'));
                
        //if($("#kt_article"+contentLinkId+" #kt_publish").length == 0)
        $('body').append(documentFragment);                    
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.