动态填充列表(jQuery)

Question

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

我想<li>在点击'populate'链接时复制(复制和追加)所有s.我该怎么做？

谢谢

Answer 1

快速简洁的版本.

$('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建议包含先发制人的解决方案.