Parsing XML and prepend HTML every 3 elements I'm working on a 3 columns photo website (responsive), and I'm parsing the img src from XML. I need to prepend HTML code every 3 elements so my photo wall respects my responsive class.

I just found a cheap solution, repeating the XML loop (for). Do you have an advice to give me, to do it right, to improve my code?

$(document).ready(function(){
 xmldata=new Array();      //initialise array for XML data
 $.ajax({                      //get the XML data
  url: "xml/gallery.xml",             //URL to get the data from
 success: function(data) {         //if we succeed, set everything up. We don't expect    failure.
  $(data).find("image").each(function()
 {
  xmldata.push($(this));        //add item into array
 });


 totalNum = xmldata.length;   

 gallery_images();              

} 


 });   

});






 function gallery_images(){

 for (var i = 0; i &lt;= 2; i++) {

 data=xmldata[i];          

 img_src=$(data).attr("src");          
 href=$(data).attr("href");
 title1=$(data).attr("title1");
 client=$(data).attr("client");





  var video_gallery_html = '';
  video_gallery_html += '&lt;article class="col span_8"&gt;&lt;div class="title_div span_24 "&gt;';
  video_gallery_html += ' &lt;a href="#"&gt; &lt;img src="images/linea.png" alt="line_divisor" /&gt;&lt;/a&gt;';
  video_gallery_html += '  &lt;h1 class="title_item col span_12 _left"&gt;DENIS ROVIRA&lt;/h1&gt;';
  video_gallery_html += '   &lt;h3 class="title_more col span_12 _right"&gt;See all projects&lt;/h3&gt;&lt;/div&gt;&lt;!-- title_div --&gt;';
  video_gallery_html += '   &lt;a href="#"&gt; &lt;img src="'+ img_src +'" alt="image_item" /&gt;&lt;/a&gt;';
  video_gallery_html += ' &lt;p&gt;Nescafe Gold&lt;/p&gt;&lt;/article&gt;&lt;!-- span_8 --&gt;';


   $(".videos_container").prepend(video_gallery_html);




 };


 for (var i = 3; i &lt;= 5; i++) {

 data=xmldata[i];          

 img_src=$(data).attr("src");          
 href=$(data).attr("href");
 title1=$(data).attr("title1");
 client=$(data).attr("client");




 var video_gallery_html2 = '';
 video_gallery_html2 += '&lt;article class="col span_8"&gt;&lt;div class="title_div span_24 "&gt;';
 video_gallery_html2 += ' &lt;a href="#"&gt; &lt;img src="images/linea.png" alt="line_divisor" /&gt;&lt;/a&gt;';
 video_gallery_html2 += '  &lt;h1 class="title_item col span_12 _left"&gt;DENIS ROVIRA&lt;/h1&gt;';
 video_gallery_html2 += '   &lt;h3 class="title_more col span_12 _right"&gt;See all projects&lt;/h3&gt;&lt;/div&gt;&lt;!-- title_div --&gt;';
 video_gallery_html2 += '   &lt;a href="#"&gt; &lt;img src="'+ img_src +'" alt="image_item" /&gt;&lt;/a&gt;';
 video_gallery_html2 += ' &lt;p&gt;Nescafe Gold&lt;/p&gt;&lt;/article&gt;&lt;!-- span_8 --&gt;';


  $(".videos_container2").prepend(video_gallery_html2);




 };


 }
Perhaps using a template system can help you, check http://handlebarsjs.com/ you can integrate with jquery and reuse partial html code as a templates

&lt;script id="entry-template" type="text/x-handlebars-template"&gt;
&lt;div class="entry"&gt;
  &lt;h1&gt;{{title}}&lt;/h1&gt;
  &lt;div class="body"&gt;
    {{{body}}}
  &lt;/div&gt;
&lt;/div&gt;
&lt;/script&gt;

&lt;script type="text/javascript" charset="utf-8"&gt;
// Compiling template to generate function
var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

//  When you receive your data content var just call this:
var context = {title: "My New Post", body: "This is my first post!"};
// in your case maybe it is:
// var context =    { img_src: $(data).attr("src"), href=$(data).attr("href"), title1: $(data).attr("title1"), client : $(data).attr("client") };
var html    = template(context);

&lt;/script&gt;