使用jQuery在按钮上复制一个元素

我是jQuery新手，我试图在用户每次按下按钮时显示另一个相同的下拉菜单。我认为这会起作用，其中#append是按钮id，#foo是下拉id：

<script type="text/javascript">
    $(document).ready(function(){
        $("#append").click(function(){
            $("#foo").append($("#foo"));
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#追加”）。单击（函数（）{
$（“#foo”）。追加（$（#foo”）；
});
});

---

但是，它不会复制原来的下拉列表，而是使其消失！我做错了什么？

你想要这样的东西：

$(document).ready(function(){
  $("#append").click(function(){
  $("#foo").parent().append($("#foo").clone().removeAttr("id"));
  });
});

---

添加到调用它的元素的末尾，因此在本例中，您希望附加到父元素，而不是在

元素内部（就像添加选项一样）。此外，除非您要移动原始实例，否则您希望删除它。还要确保您的id是唯一的，我会删除

id=“foo”

并给它一个类，或者删除副本上的id，等等……除了重复id以外的任何内容。

如果您要复制元素，请使用：

也就是说，不要尝试创建自己的菜单。使用现有的插件（有很多插件）。菜单存在臭名昭著的跨浏览器问题。重新发明那个特殊的轮子是没有价值的

$("#foo").clone().attr("id", "foo2").insertAfter("#foo");