javascript - 如何追加部分 View 的根元素

Question

在 ASP.NET MVC 项目的主视图中，我渲染了一次局部 View ，然后单击“添加”按钮，我想将局部 View 附加到表单中。但是当我单击“添加”时，只有子元素...被添加到MainView中。如何附加部分 View (_roll.cshtml) 的根元素？

MainView.cshtml

<div id="rolls">
    @Html.Partial("_roll")
</div>

<br />

<div class="row">
    <button id="addRoll" class="btn"></button>
</div>

_roll.cshtml

<div class="roll">
    <div class="row">
        ...
    </div>
</div>

.js

$(function () {
    $('#addRoll').click(function (e) {
        e.preventDefault();
        $('#rolls').append($('.roll').html());
    });
});

Answer 1

尝试只使用元素本身而不是它的innerHTML (.html()):

$(function () {
    var $rolls = $('#rolls'), $role = $('.roll:first');
    $('#addRoll').click(function (e) {
        e.preventDefault();
        //$rolls.append($('.roll')); // wont work since you want to append the same element to the same parent
        $rolls.append($role.clone());
    });
});