Populating a list dynamically (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 append) all <li>s when clicked on the 'populate' link. How do I do it?

Thanks

Answer 1

You can do something like this:

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

Answer 2

Quick and concise version.

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

Of course, you may want to define your 'a' and 'ul' with a class or id in order to be more specific.

EDIT:

To expand on the disclaimer given above, this will be a somewhat fragile solution as it will affect all 'a' and 'ul' elements. This may likely not be what you desire.

Better form is to give your html elements classes or ids, and then attach events to those.

Example:

$('#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>

With thanks to Ed Woodcock for suggesting the inclusion of a preemptive solution.

Answer 3

var ul = $('ul');

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