html - Arrange div inside another div with Javascript -

so if have free time:

this quite complex thing, or i'm naive, i've been working hours without getting desired output/result, wish me if have free time.

firstly data have, retrieved php newsfeed, not static number of items:

<span class="dateclass">date1</span> <span class="dateclass">date2</span> <span class="dateclass">date3</span> ....and on <br> <div class="contentclass">content1</div> <div class="contentclass">content2</div> <div class="contentclass">content3</div> ....and on 

i need work classes , ids, because no php template engine can't call single element, code distributed among several files, , easier way achieve need via javascript , ids / classes

i need following output copying data above and, javascript, tweak data in order achieve final result, should be:

<div class="frame">   <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>   <span class="timeline-date"> <span class="dateclass">date1</span> </span>   <div class="timeline-content"> <div class="contentclass">content1</div> </div> </div> <div class="frame">   <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>   <span class="timeline-date"> <span class="dateclass">date2</span> </span>   <div class="timeline-content"> <div class="contentclass">content2</div> </div> </div> <div class="frame">   <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>   <span class="timeline-date"> <span class="dateclass">date3</span> </span>   <div class="timeline-content"> <div class="contentclass">content2</div> </div> </div> 

the <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div> ones don't exist data in order "transform", yet part of style , i'd need them well, haven't gotten far worry :(

i know, change!, yet i've been close result, i've been using different modified versions of following code:

settimeout(function() {   var element = document.getelementbyid("unique_id");   element.innerhtml = "";   array.prototype.foreach.call(document.queryselectorall(".contentclass"), function(e) {     var example = element.appendchild(e.clonenode(true));   }); }, 300); 

i'm not posting versions i've made because none of them going nowhere, , none of them work :/ don't think have copy of those

so i've tried unsuccessfully far has been:

• adding ids <span class="timeline-date"> , <div class="timeline-content"> can manipulate them js

• using different div setups in order achieve final result manipulating js code, means using following div/html arrangement in order paste clonenode results there added elements, such var div = document.createelement('div'); div.classname += "frame";, etc. yet nothing works.

• i've tried adding id via javascript div created in same code, this:

.....(a defined variable counter, of course)

var div = document.createelement('div'); div.id = "id_frame"+counter; counter++; 

yet didn't work when tried send results getelementbyid , id generated counter

i'm give up, has been quite complicated me ;p ... suggestions? :(

as far this:

<div id="id_unique">   <div class="frame">     <span class="timeline-date">date1</span>   </div>   <div class=" timeline-content">content1</div>   <div class="frame">     <span class="timeline-date">date2</span>   </div>   <div class=" timeline-content">content2</div>   <div class="frame">     <span class="timeline-date">date3</span>   </div>   <div class=" timeline-content">content3</div> </div> 

which isn't far final result if wasn't <div class="frame"> should cover content tags :(

first thing think should dateclasses , contentclass, , create frame 1 one:

var dateclasses = $('.dateclass'); // array of dateclasses var contentclasses = $('.contentclasses'); // array of contentclasses  for(var i=0; i< math.min(dateclasses.length,contentclasses.length); i++) {      var frame = $("<div>", {class: "frame"}); // create frame node      var timelinedate = $("<div">,{class: "timeline-date"});      var timelinecontent = $("<div">,{class: "timeline-content"});       //append dateclass timeline-data:      timelinedata.append(dateclasses[i]);        //append contentclass timeline-content:      timelinecontent.append(contentclasses[i]);       //append frame      frame.append(timelinedata);      frame.append(timelinecontent); } 

i didnt run or test tough, hope give idea on how achieve want.

hope helped.