javascript - Can not append elements to div -

my javascript intended following.

i have parent div 6 children nodes. create 3 divs js , append them parent. insert original 6 children nodes 3 divs created , appended original parent. these 3 divs siblings of original 6 elements , parents of them.

this works. 2 of original children not appended middle div have intended in javascript. don't know i'm doing wrong. below javascript , here link web page script being executed on.

http://digitalenamel.com/espresso-event-schedule/

settimeout( function() {     try{         var calendar = document.getelementbyid('calendar');         var calendarchildren = calendar.children;         console.log("how many children #calendar have? " + calendarchildren.length);         var calendarheaders = document.getelementsbyclassname('fc-header');           var calendarbodies = document.getelementsbyclassname('fc-content');         var containerforcalendars1 = document.createelement("div");         var containerforcalendars2 = document.createelement("div");         var containerforcalendars3 = document.createelement("div");         calendar.appendchild(containerforcalendars1);         calendar.appendchild(containerforcalendars2);         calendar.appendchild(containerforcalendars3);         containerforcalendars1.appendchild(calendarheaders[0]);          containerforcalendars1.appendchild(calendarbodies[0]);         containerforcalendars2.appendchild(calendarheaders[1]);         containerforcalendars2.appendchild(calendarbodies[1]);         containerforcalendars3.appendchild(calendarheaders[2]);         containerforcalendars3.appendchild(calendarbodies[2]);         console.log("how many elements class of fc-header inside calendarheaders array? " + calendarheaders.length);         console.log("how many elements class of fc-content inside calendarbodies array? " + calendarheaders.length);     }catch(err){         console.log("there general error js calendar.");     } }, 8000); 

edit: http://jsfiddle.net/xe1ssxeu/ reproduced error

using updated question, i've made attempt. i've eschewed method said, it's bit over-the-top. had jquery enabled in jsfiddle used it.

as mentioned you're learning i've included comments should explain going on.

// set jquery run once page ready. $('document').ready(function() {     // create list of headers & contents     var headers = $('.fc-header');     var contents = $('.fc-content');      // cycle through headers & contents (assuming they're equal in length)     for(i=0; i<headers.length; i++) {          // add div calendar id of iterator can          // access it.         $('#calendar').append('<div id="' + + '"></div>');          // access div using id added, append i'th header         // , i'th content.         $('#' + i).append(headers[i]);         $('#' + i).append(contents[i]);          // remove id don't need later.         $('#' + i).removeattr('id');     } }) 

jsfiddle