jquery - Javascript Masonry not working with created elements -

i have created page uses script create divs images inside of them , append image source using code. page intended update user's account uploaded images , display them. have followed many of tutorial guides , lead me of images being in 1 column , overlapping. pretty used code : http://codepen.io/desandro/pen/bdgrzg , doesn't work. can direct me in right direction did wrong?

html code

<div class="tab-content" id="photos">                     <div class="grid-sizer"></div>                     <div class="grid"></div> </div> 

js code

$(document).ready(function () {  allimgs = document.getelementbyid("photos").getelementsbytagname("img");   //create elements each image for(i = 0; i<photoarr.length;i++) {     if(i%3==0)     {         div = document.createelement("div");         div.classname = "entries row grid";         document.getelementsbyclassname("grid")[0].appendchild(div);     }      //<div class="entry one-third">     div1 = document.createelement("div");     div1.classname = "entry one-third grid-item";     div.appendchild(div1);      /* <figure>             <img src="images/img.jpg" alt="" />             <figcaption><a href="recipe.html"><i class="ico i-view"></i> <span>view recipe</span></a></figcaption>         </figure>     */     fig = document.createelement("figure");     div1.appendchild(fig);     img = document.createelement("img");     img.src = photoarr[i];     fig.appendchild(img);     figcap = document.createelement("figcaption");     link = document.createelement("a");     link.href = "recipe.html";     figcap.appendchild(link);     ielement = document.createelement("i");     ielement.classname = "ico i-view";     figcap.appendchild(ielement);     span = document.createelement("span");     t = document.createtextnode("view recipe");                          span.appendchild(t);                                                                                                                                                     figcap.appendchild(span);                        fig.appendchild(figcap);      /*     <div class="container">         <h2><a href="recipe.html">super easy blueberry cheesecake</a></h2>      */     divcont = document.createelement("div");                                                                                                                                                                                 divcont.classname = "container";     div1.appendchild(divcont);                                                                       h2 = document.createelement("h2");     divcont.appendchild(h2);        link2 = document.createelement("a");     link2.href = "recipe.html";     h2.appendchild(link2);     t2 = document.createtextnode("yummy food");     link2.appendchild(t2);     /*      /*div class="actions">         <div>         */     divact = document.createelement("div");     divact.classname="actions";     divcont.appendchild(divact);     div2 = document.createelement("div");     divact.appendchild(div2);      /* <div class="difficulty"><i class="ico i-easy"></i><a href="#">easy</a></div> */     div3 = document.createelement("div");     div3.classname="difficulty";     div2.appendchild(div3);     ielement2 = document.createelement("i");     ielement2.classname = "ico i-easy";     div3.appendchild(ielement2);     link3 = document.createelement("a");     link3.href = "#";     t3 = document.createtextnode("easy");     link3.appendchild(t3);     div3.appendchild(link3);      /* <div class="likes"><i class="ico i-likes"></i><a href="#">10</a></div> */     div4 = document.createelement("div");     div4.classname="likes";     div2.appendchild(div4);     ielement3 = document.createelement("i");     ielement3.classname = "ico i-likes";     div4.appendchild(ielement3);     link4 = document.createelement("a");     link4.href = "#";     t4 = document.createtextnode("10");     link4.appendchild(t4);     div4.appendchild(link4);      /* <div class="comments"><i class="ico i-comments"></i><a href="recipe.html#comments">27</a></div> */     div5 = document.createelement("div");     div5.classname="comments";     div2.appendchild(div5);     ielement4 = document.createelement("i");     ielement4.classname = "ico i-comments";     div5.appendchild(ielement4);     link5 = document.createelement("a");     link5.href = "#";     t5 = document.createtextnode("27");     link5.appendchild(t5);     div5.appendchild(link5);     /*                 </div>             </div>         </div>     </div>     */ }  //masonry code var $grid = $('.grid').imagesloaded( function() {     $grid.masonry({     itemselector: '.grid-item',     percentposition: true,     columnwidth: '.grid-sizer' });  }); }); 

the end result of photos http://i58.tinypic.com/xbcv1w.png

with dynamically loaded items, can call masonry , reload items , layout:

//masonry code var $grid = $('.grid').imagesloaded( function() { $grid.masonry({ itemselector: '.grid-item', percentposition: true, columnwidth: '.grid-sizer' }); $grid.masonry( 'reloaditems' ); $grid.masonry('layout');  });