Dynamic List Fill (jQuery)

Question

<ul>
  <li>item x</li>
  <li>item y</li>
  <li>item z</li>
</ul>
<a href="#">Populate</a>

I want to duplicate (copy and add) everything <li>when I click on the "fill" link. How to do it?

thank

Answer 1

Quick and concise version.

$('a').click(function() {
    $('ul').children().clone().appendTo('ul');
})

Of course, you can define your "a" and "ul" with a class or identifier to be more specific.

EDIT:

To expand the above disclaimer, this will be a somewhat fragile decision, as it will affect all elements "a" and "ul". Perhaps this is not the way you want.

- html- , .

:

$('#myPopulateAnchorElement').click(function() {
 $('#myExpandableUL').children().clone().appendTo('#myExpandableUL');
});

<ul id='myExpandableUL'>
  <li>item x</li>
  <li>item y</li>
  <li>item z</li>
</ul>
<a href="#" id='myPopulateAnchorElement'>Populate</a>

.

Answer 2

:

$(function(){
   $('.anchorClass').click(function(){
        var ul = $('.ulClass');
        ul.append(ul.html());
   });
});

EDIT:

html :

  <ul class="ulClass">
  <li>item x</li>
  <li>item y</li>
  <li>item z</li>
</ul>
<a class="anchorClass" href="#">Populate</a>

Answer 3

var ul = $('ul');

$('a').click(function(){
    ul.children().clone(true).appendTo(ul);
});

Answer 4

You can do something like this:

$('a').click(function(){
   $('li').each(function(){
      $(this).clone().appendTo('your selector where to put the copy');
   })
})