Question

我有以下div。只要我点击按钮/链接

，就需要添加

<div class="add_dependent" style="display: none;">
            <div class="dependent_content">
                <span>
                    <strong>Dependent<span class="divcount"></span></strong>
                </span><span class="delete">Delete</span>
                <div><strong>Relationship to you</strong></div>
                <div>
                    <input type="radio" value="0" name="relationship" class="dependent-relation" />
                    <label>Partner</label>
                    <input type="radio" value="1" name="relationship" class="dependent-relation"/>
                    <label>Child under21</label>
                    <input type="radio" value="2" name="relationship" class="dependent-relation"/>
                    <label>dependent over21</label>
                </div>
                <div><strong>Date of birth</strong></div>
                <div>
                    <input type="text" id="dependent-dob" name="dependent-dob" datepicker/>
                    <input type="hidden" id="dependent-id" name="dependent-id" />

                </div>
            </div>
        </div>
        <a href="" id="add" ><img src="../../Content/themes/base/images/addnew_depnt.png" style="border: 0px;" alt="add dependent"></a>

最初这个div将被隐藏。每次点击链接（添加依赖项）时都必须动态添加此div，并且父div的div id应分配依赖+ id（1,2,3 ...）。

我使用了以下脚本来处理此问题，但在dependent1中输入的数据将克隆在后续的div中。

$("body").delegate("#add", "click", function () {
        var total_length = $(".add_dependent").length
        $(".add_dependent:eq(0)").clone().prependTo("#dependent-details").css("display", "inline");

        $(".add_dependent:last-child .divcount").append(total_length)

        $(".divcount").each(function (index) {
            var increment = index + 1
            $(this).parents(".add_dependent").attr("id", "depend" + increment)
            $(this).text(increment)

        });
    })

每当我点击添加依赖链接时，如何将上述html元素添加到现有页面？

有人可以帮我吗???

Answer 1

你可以使用append函数并从模板div获取html并将其注入另一个div进行渲染

$("#renderDiv").append($("#templateDiv").html());

小提琴：http://jsfiddle.net/Zz6wU/2/

Answer 2

从评论“每当我点击添加依赖，这个div必须添加到现有div。我怎么能这样做？” ：

$("#baseDiv").append($("#newDiv").html());

不确定这是你想要的

将html内容动态添加到页面

2 个答案: