Question

我正在尝试向不断添加＆lt; div＆gt;的页面添加一些代码单击链接时的页面部分。这是我的代码：

<script type="text/javascript">
function ShowDiv() {
document.getElementById("show").style.display = "";
}
</script>

<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>

<div id="show" style="display: none;">
<p>This is the div!</p>
</div>

这适用于一个＆lt; div＆gt;但我需要它在单击链接时继续添加页面。我将用于保存一个带有一组id的表单，以便发布到PHP。

Answer 1

您可以克隆原始div（将作为模板）并将克隆的一个附加到页面：

Fiddle

HTML：

<p>
    <a id="add" href="#" class="control">Add New</a>
</p>

<div id="show" style="display: none;">
    <p>This is the div!</p>
</div>

JS：

$(document).ready(function()
{
    var i = 0;

    $('#add').click(function()
    {
        var newEl = $('#show').clone();
        newEl.attr('id', "show" + i);
        i++;
        newEl.show().appendTo("body");
    });
});

Answer 2

<script type="text/javascript">
function ShowDiv() {
    var a = $("#show").clone(true); // clones element
    $(".test").append(a);  // appends to parent
}
</script>

<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div class="test">  <!-- defines parent for simple selection -->
    <div id="show"> <!-- element to clone -->
        <p>This is the div!</p>
    </div>
</div>

单击JavaScript </div>显示多个<div>

2 个答案: