javascript - 在 jQuery 中创建多个相同的元素

Question

我希望能够创建一个新的item，它基本上与同一个目录中的所有其他items具有相同的结构列表。我研究了 append 但我想知道是否有比使用 append 写出我的结构更简单的方法。

在一个完美的世界中，我可以在 click 创建按钮时复制 ul 中的最后一个 li 并添加一个新元素作为最后一个 ul 子项的精确副本的 DOM(减去可能在最后一项中的任何信息)。

或 也许我可以创建一个虚拟元素，每次用户单击创建按钮时都会添加该虚拟元素的新实例？

非常感谢任何指导!

Answer 1

这可能很容易做到，请检查下面的代码片段:

var listEl = $('.list');
$('.create-btn').on('click', function() {
  var lastItemNode = listEl.find('li:last-child').clone();
  listEl.append(lastItemNode);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<button class="create-btn">Create new item</button>