如何追加局部視圖的根元素

Question

在我的ASP.NET MVC項目的主視圖中，我渲染了一次局部視圖，然后單擊添加按鈕我想將局部視圖附加到窗體。 但是當我單擊添加時，只有子元素...被添加到MainView中。 如何附加部分視圖的根元素（_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());
    });
});

Answer 2

或者，如果需要，您可以簡單地使用元素的OuterHTML。