动态填充列表(jQuery)

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

我想在点击“填充”链接时复制(复制和附加)所有< li> s.我该怎么做？

谢谢

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

当然,您可能希望使用类或id定义“a”和“ul”以便更具体.

编辑：

为了扩展上面给出的免责声明,这将是一个有点脆弱的解决方案,因为它将影响所有’a’和’ul’元素.这可能不是你想要的.

更好的形式是给你的html元素类或id,然后将事件附加到那些.

例：

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

感谢Ed Woodcock建议包含先发制人的解决方案.