如何使用jquery动态添加HTML元素？

Question

我的目标是在初始加载时只有一个元素，该元素应具有id="something_O"。当点击添加链接时，在已经存在的元素下方添加新的相同html元素，不是用id="something_o"，而是用id="something_1"或最后一个元素+ 1。用户应该能够无限地添加这些元素。当用户点击删除时，元素应该消失。

有什么想法吗？这里准备了一个示例，以便更轻松地进行帮助...

- Davor Zubak

---

@DennisTraub，我从一开始就遇到了麻烦，不知道如何生成元素... - Davor Zubak

参考：http://api.jquery.com/clone/ 另外，你能解释一下为什么要保留计数的id吗？我真的看不出来它有什么用处，因为如果要在css中使用它们，就意味着你需要预先拥有每个可能的id。 - Yoshi

@Yoshi，谢谢，我需要ID以便稍后提取数据，CSS ID不需要是ID，可以是类。我会看一下clone()。 - Davor Zubak

你会如何使用这样的ID？你可以简单地使用元素索引（在其父元素中的位置），这将恰好是您尝试实现的编号（而且您甚至不必维护它）。 - Yoshi

@Yoshi，我需要从这个div中提取图形值的id，以便我可以将参数传递给MVC控制器。 - Davor Zubak

Answer 1

这可以通过以下方式之一实现：

$(document).ready(function() {
    $('body').on('click', '.AddEl', function() {
        $('.actions:first')
            .parent()
            .clone()
            .attr('id', 'element_' + $('.actions').length)
            .insertAfter($('.actions:last').parent());
    });
    $('body').on('click', '.RemoveEl', function() {
        $(this).closest('.actions').parent().remove();
    });
});

请注意，我已修改您的html，使得要克隆的第一个元素现在是id="element_0"，并使用CSS选择器对其及所有随后创建的元素进行了定位：

JS Fiddle演示。

div[id^=element] {
    /* css */
}

这可能会更简单，但这只是我的第一印象。

---

编辑提供了稍微改进的版本，初始添加略微更加简洁，如果元素被添加/删除，还可以防止生成重复的id：

$(document).ready(function() {
    $('body').on('click', '.AddEl', function() {
        var $elems = $('.actions').parent();
        $elems
            .first()
            .clone()
            .insertAfter($elems.last());
        $('div[id^="element_"]').each(
            function(i){
                $(this).attr('id','element_' + i);
            });
    });
    $('body').on('click', '.RemoveEl', function() {
        $(this).closest('.actions').parent().remove();
    });
});

JS Fiddle demo.

- David Thomas

---

如果他想让枚举从1开始，他只需要在这一行代码中加上+1： .attr('id', 'element_' + $('.actions').length+1) - Constantin Groß

他可以这样做，但似乎有点不必要，我应该编辑一个修正条款以确保在删除和添加时不会创建重复的ID。 - David Thomas

Answer 2

var counter = 1;
$('.AddEl').live('click', function () {
    var el = $('#element_1').clone().attr('id', 'element_' + ++counter).appendTo('body');
});

$('.RemoveEl').live('click', function () {
    var el = $(this).parents('.elem')
    if (el.get(0).id !== 'element_1') el.remove();
});

点击这里查看

- Ketan Modi

---

谢谢，element_0 应该是可移除的，但始终必须有一个元素，不一定是 element_0 吗？ - Davor Zubak

我的意思是，第一个元素[0]应该是可移除的，在你的例子中它不能被移除吗？ - Davor Zubak

类似这样：$(this).closest('.actions').parent().remove(); 但是那个元素总是留下来了？ - Davor Zubak

那是因为我使用了element_1来创建克隆。您想让我修改代码吗？ - Ketan Modi

是的，但一个元素应该保持不变，不依赖于Id_number。 - Davor Zubak

Answer 3

我刚刚覆盖了你的代码。

你可以尝试这个，也许是你想要的。

http://jsfiddle.net/kongkannika/QeSPP/34/

- Kannika