How to repeat div using jQuery or JavaScript?

Question

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.

Take a look at [`cloneNode`](https://developer.mozilla.org/en-US/docs/DOM/Node.cloneNode) — Niet the Dark Absol, Apr 15 '13 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, Apr 15 '13 at 23:46
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, Apr 16 '13 at 00: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 come I was thinking my approach may be wrong. — Javadotnet, Apr 16 '13 at 00:14
Like I said (twice)... I did not downvote. I'm just explaining why it was downvoted (because it looks like no effort was made). Yes, your approach is wrong. You should create your divs dynamically with JavaScript. If it's possible, you should consider using jQuery, which will make this much easier. Unfortunately it appears that you lack the basic JavaScript skills to understand how to do this. — jahroy, Apr 16 '13 at 00:18
If you want better help, you should provide an example of what your JSON data will look like. You should also start with something simple... Start with some JSON and try to dynamically create some **VERY BASIC** divs. For example, I would start by trying to crate three simple divs that contain the words "_one, two, three_". — jahroy, Apr 16 '13 at 00:21
jQuery makes tasks like this very easy. Check out [this link](http://api.jquery.com/append/). It demonstrates how easy it is to add a div to the document's body... It would look something like this: `$('body').append('
Hello
');` — jahroy, Apr 16 '13 at 00:23
actually getting feed from wordpress blog using json plugin and then making every post as mobile page view so it's easy to navigate in small screen. that is why used json else I have read jquery is more useful to perform such task. — Javadotnet, Apr 16 '13 at 00:26

score 4 · Answer 1 · answered Apr 15 '13 at 23:43

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);

answered Apr 15 '13 at 23:43

Sachin

40,216
7
90
102

Don't think that's what he needs. If you look at `id` and `href`, they aren't the same. – Doon Apr 15 '13 at 23:45
but contents of mydiv is not same. and if I am not wrong cloneNode() may lead to duplicate element IDs in a document I want diff id as I want to make it navigate next and previous – Javadotnet Apr 15 '13 at 23:45
1

you can set the content ID as you want as well as other properties too. – Sachin Apr 15 '13 at 23:47
but sachin it won't create a href="#page3" and inner div class dynamically then too viewing clone example but I think it may not solve the problem. though I never use it I can't conclude in 5 mins thanks for suggestion. – Javadotnet Apr 15 '13 at 23:54

PSL · Answer 2 · 2013-04-16T00:08:09.077

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

score 1 · Answer 3 · answered Apr 16 '13 at 01:28

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

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

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

edited May 23 '17 at 11:51

Community

1
1

answered May 29 '14 at 08:09

Hugo

1,303
14
16

How to repeat div using jQuery or JavaScript?

4 Answers4

Linked