Javascript 如何使用JS/Jquery单击同一个按钮，将html代码重复10次？

我希望通过单击名为：

的按钮，能够在名为：

的div下显示相同的html代码10次。我想我需要某种形式的工作循环，但不确定。任何建议都会有帮助，谢谢

我的HTML代码：

<div id="product_name">
    <input id="skriv_produktnavn" placeholder="Skriv Produktnavn her" required></label>

    <button id="add_another_product_name">Tilføj endnu et produktnavn</button>

    <div id="add_remove_product_name">
        <input id="added_product_name" placeholder="Skriv Produktnavn her" required></label>
        <button id="remove_product_name">X</button>
    </div>

Tilføj endnu和produktnavn
X

使用

for

循环连接HTML代码的10个副本。然后使用

.after（）

将其放在DIV后面

$("#add_another_product_name").click(function() {
    var html = '';
    for (var i = 0; i < 10; i++) {
        html += 'html code that you want to repeat';
    }
    $("#add_remove_product_name").after(html);
}

$（“#添加另一个产品名称”）。单击（函数（）{
var html=''；
对于（变量i=0；i<10；i++）{
html+='要重复的html代码'；
}
$（“#添加#删除(产品)名称”）。在（html）之后；
}

您可以使用jQuery

clone（）

但是，在克隆元素时，所有属性都将是相同的。例如，它们都具有相同的id属性，这将导致问题，并且它不是有效的html

因此，为了正确地进行克隆，您必须修复克隆的元素

演示：

HTML:

Tilføj endnu和produktnavn
X
克隆

在JavaScript中添加额外元素而不必创建难看的html字符串的一种技术是从html中的一个隐藏元素集开始。在页面加载时，您删除该元素集，但保留对该元素集的引用。然后，当您想向页面添加一个元素集时，您可以克隆删除的元素集。所有这些都比较容易f在附加输入周围添加容器div

您还需要确保

id

属性值是唯一的。对于“删除”按钮，您可以将

id

替换为

类

。对于输入的

id

值，如果您真的需要它们，可以向它们添加索引值

由于删除按钮是动态添加的，因此我建议在绑定单击处理程序时使用事件委派

HTML:

---

Tilføj endnu et produktnavn X div标签失衡。您的

标签没有

您真的想在单击按钮时添加10个输入，还是希望每次单击只添加一个输入，最多10个？嗨，John，如果我不够清楚，很抱歉。我希望每次单击只添加一个输入，最多10个最多10个。问得好，谢谢，我试过你的代码，但它没有真正起作用。也许这是我必须在html代码中加入的部分，我做错了？我在网站上还有一些其他jquery，用于相同的标记，它们正在做一些其他的事情，所以可能它们相互干扰？这些元素有ID吗？如果你只是插入重复rt相同的HTML，您将创建无效的重复ID。或者，如果您要将处理程序绑定到动态HTML中的项目，则需要使用事件委派：围绕此问题存在许多潜在问题。但是您没有在问题中提供足够的详细信息，无法在回答中解决这些问题。请显示您正在尝试的HTMLg添加，以及您如何尝试使用它。嗨，Barmar，我今天没有时间，但明天我将发布关于我的帖子的更详细的描述和一些代码。请继续关注。谢谢你好，山姆，谢谢您的输入。我明天将尝试使用它，然后我会回复您我的反馈。再次感谢您的努力。嗨，约翰，谢谢您谢谢你的js代码。现在它可以正常工作了。你是最好的！

  var $tpl = $('#product_name').clone();
  var num = 0

   $('#clone').click(function () {
        num++;
        var $cloned = $tpl.clone();
        $cloned.attr('id', $tpl.attr('id') + '_' + num);
        $(':not([id=""])', $cloned).each(function(){
            $(this).attr('id', $(this).attr('id') + '_'+num); 
        });
        $cloned.appendTo('#wrapper');
    });

<div id="wrapper">
    <div id="product_name">
        <input id="skriv_produktnavn" placeholder="Skriv Produktnavn her" required />
        <button id="add_another_product_name">Tilføj endnu et produktnavn</button>
        <div id="add_remove_product_name">
            <input id="added_product_name" placeholder="Skriv Produktnavn her" required />
            <button id="remove_product_name">X</button>
        </div>
    </div>
</div>
<button id="clone">Clone</button>

<div id="product_name">
    <input id="skriv_produktnavn" placeholder="Skriv Produktnavn her" required="required"/>
    <button id="add_another_product_name">Tilføj endnu et produktnavn</button>
    <div id="additional_product_names">
        <div class="add_remove_product_name" style="display: none;">
            <input id="added_product_name" placeholder="Skriv Produktnavn her" required="required"/>
            <button class="remove_product_name">X</button>
        </div>
    </div>
</div>

$(function() {
    var MAX = 10;

    var $addBtn = $('#add_another_product_name'),
        $additionalContainer = $('#additional_product_names');
        $TEMPLATE = $additionalContainer.children(':first').remove();

    function update() {
        var $additonalDivs = $additionalContainer.children();

        // Enable/disable the add button.
        $addBtn.prop('disabled', $additonalDivs.length >= MAX);

        // Re-index the "id" attributes.
        $additonalDivs.find('input').attr('id', function(i) {
            return 'added_product_name[' + i + ']';
        });
    }

    $addBtn.click(function() {
        $TEMPLATE.clone().appendTo($additionalContainer).show();
        update();
    });

    $('#product_name').on('click', '.remove_product_name', function() {
        $(this).closest('.add_remove_product_name').remove();
        update();
    });
});