I have an HTML page with the following div tags

<div data-role="page" id="pageHome" data-theme="a">
  <div data-role="content">
    <center>
      <h3><a href="#pageHome" data-role="none"><img src="images/logo.png" /></a></h3>
    </center>
    <div class="dydivarr0"> </div>
    <br />
    <div data-role="controlgroup" class="ui-btn-right"> <a href="#page1" data-role="button">Next</a> </div>
  </div>
</div>



<div data-role="page" id="page1" data-theme="a">
  <div data-role="content">
    <center>
      <h3><a href="#pageHome" data-role="none"><img src="images/logo.png" /></a></h3>
    </center>
    <div class="dydivarr1"> </div>
    <br />
    <div data-role="controlgroup" class="ui-btn-right"> <a href="#page2" data-role="button">Next</a> </div>
  </div>
</div>

<div data-role="page" id="page2" data-theme="a">
  <div data-role="content">
    <center>
      <h3><a href="#pageHome" data-role="none"><img src="images/logo.png" /></a></h3>
    </center>
    <div class="dydivarr2"> </div>
    <br />
    <div data-role="controlgroup" class="ui-btn-right"> <a href="#page3" data-role="button">Next</a> </div>
  </div>    

dydivarr is generated dynamically from web a response using JSON. Using that response I create dynamic div content, next I want to repeat that div as shown above. Is there any better way than to repeat static html code? I guess there must be few jQuery or JavaScript tricks for that.

Any help would be appericiated.

I have an HTML page with the following div tags

<div data-role="page" id="pageHome" data-theme="a">
  <div data-role="content">
    <center>
      <h3><a href="#pageHome" data-role="none"><img src="images/logo.png" /></a></h3>
    </center>
    <div class="dydivarr0"> </div>
    <br />
    <div data-role="controlgroup" class="ui-btn-right"> <a href="#page1" data-role="button">Next</a> </div>
  </div>
</div>



<div data-role="page" id="page1" data-theme="a">
  <div data-role="content">
    <center>
      <h3><a href="#pageHome" data-role="none"><img src="images/logo.png" /></a></h3>
    </center>
    <div class="dydivarr1"> </div>
    <br />
    <div data-role="controlgroup" class="ui-btn-right"> <a href="#page2" data-role="button">Next</a> </div>
  </div>
</div>

<div data-role="page" id="page2" data-theme="a">
  <div data-role="content">
    <center>
      <h3><a href="#pageHome" data-role="none"><img src="images/logo.png" /></a></h3>
    </center>
    <div class="dydivarr2"> </div>
    <br />
    <div data-role="controlgroup" class="ui-btn-right"> <a href="#page3" data-role="button">Next</a> </div>
  </div>    

dydivarr is generated dynamically from web a response using JSON. Using that response I create dynamic div content, next I want to repeat that div as shown above. Is there any better way than to repeat static html code? I guess there must be few jQuery or JavaScript tricks for that.

Any help would be appericiated.

• javascript
• jquery
• json
• jquery-mobile

• Take a look at cloneNode – Niet the Dark Absol Commented Apr 15, 2013 at 23:43
• Let me make sure I understand the problem correctly. Youo make an AJAX request to populate data into the mydivarr* containers, but what you really want to do is to create the entire enclosing HTML structure (i.e. data-role="page" divs) dynamically as well based on the JSON result from the AJAX call? – Mike Brant Commented Apr 15, 2013 at 23:46
• why -2? atleast ment please – Javadotnet Commented Apr 15, 2013 at 23:47
• I did NOT downvote, but I can understand why somebody would. This question shows very little effort. It's as if you said, "here's what I want to do... I don't really feel like trying to learn the basics of JavaScript, so please give me some code to cut and paste." Again, I'm not the downvoter... But I don't see how you could be able to retrieve JSON from a post and NOT be able to answer your own question. – jahroy Commented Apr 16, 2013 at 0:13
• jahroy : may be you thinking I started this page before some hours and looking for some ready-made stuff may be others think too. but it's been 2 days I am behind this div and I don't know where I am doing wrong because I was thinking the best way to create this dynamic content at time of making my dydivarr only but it didn't work and even after lots of effort result didn't e I was thinking my approach may be wrong. – Javadotnet Commented Apr 16, 2013 at 0:14

4 Answers 4

So you want cloneNode of your div, so try something like this

var div = document.getElementById('myDiv'),
clone = div.cloneNode(true);
clone.id = "some_id";
document.body.appendChild(clone);

Something like this? Sample Fiddle

var lastSection = $('[data-role="page"]:last'); //get the last page probably you can use this to increment the id based on last id
var newSection = lastSection.clone(false);//default is false anyways, if you want to carry over data and events you can use true.
newSection.attr('id','setthenewid');//set the new id
$('div[class^=dydivarr]',newSection).attr('class','newclass'); //set the new class for your divarr
$('.ui-btn-right a',newSection).attr('href','newurlmap');//set the new url map 
lastSection.after(newSection); //place the entire page section in the end

Update :

Simple Code worked. It was just my wrong approach

<script type="text/javascript">

for(var lp=0; lp < 10; lp++)
{
document.write('<div data-role="page" id="page'+lp+'" data-theme="a">');
document.write('  <div data-role="content">');
document.write('    <center>');
document.write('      <h3><a href="#page0" data-role="none"><img src="images/logo.png" /></a></h3>');
document.write('     </center>');
document.write('     <div class="dydivarr+lp+'"> </div>');
document.write('     <br /> ');
document.write('     <div data-role="controlgroup" class="ui-btn-left"> <a href="#page'+(lp-1)+'"     data-role="button">Previous</a> </div>');
document.write('     <div data-role="controlgroup" class="ui-btn-right"> <a href="#page'+(lp+1)+'" data-role="button">Next</a> </div>');
document.write('   </div>');
document.write(' </div>');

}

</script>

Thanks

How can I replicate a div a certain number of times based on a select-box value?

Roko C. Buljan

And

Vivin Paliath

's Answers