如何将HTML元素保存到jQuery对象？

Question

I'm trying to add another one of these on an image click:

<div class="roleoption">
    <img src="@Url.Content("~/Public/images/delete.png")" alt="delete" />
    @Html.DropDownList("role", DSS.WebUI.Helpers.CustomHelpers.SelectListItemsForRole(Model.ExistingRoles, role))
</div>

And here I'm trying to create a new .roleoption whenever the add image is clicked:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        //A roundabout way to construct the DIV I need:
        var $roleOption = '<div class="roleoption"><img src="@Url.Content("~/Public/images/delete.png")" alt="delete" /></div>';
        var $selectList = '@Html.DropDownList("role", DSS.WebUI.Helpers.CustomHelpers.SelectListItemsForRole(Model.ExistingRoles, 1))';
        $($roleOption).append($selectList);


        $('img.add-role').click(function() {
            $(this).parent().append($roleOption);
        });
    });
</script>

The MVC3 code you see up there, generates the following script on View render:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var $roleOption = '<div class="roleoption"><img src="/Public/images/delete.png" alt="delete" /></div>';
        var $selectList = '<select id="role" name="role"><option selected="selected" value="1">Anonimo</option>
<option value="2">Registrado</option>
<option value="3">Tecnico</option>
<option value="4">Empresario</option>
<option value="5">Editor</option>
<option value="6">Financias</option>
<option value="7">Administrador</option>
</select>';
        $($roleOption).append($selectList);
        $('img.add-role').click(function() {
            $(this).parent().append($roleOption);
        });
    });

</script>

I get the following error:

Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]

How can I make this work and how can I clean up this code?

I think the issue lies in the fact that my HTML helper return the select element as multilines, how can I workaround this fact?

Edit:

If I do:

var $selectList = $(' @Html.DropDownList("role", DSS.WebUI.Helpers.CustomHelpers.SelectListItemsForRole(Model.ExistingRoles, 1)) ');

I get:

    $(document).ready(function () {
        var $roleOption = '<div class="roleoption"><img src="/Public/images/delete.png" alt="delete" /></div>';
        var $selectList = $(' <select id="role" name="role"><option selected="selected" value="1">Anonimo</option>
<option value="2">Registrado</option>
<option value="3">Tecnico</option>
<option value="4">Empresario</option>
<option value="5">Editor</option>
<option value="6">Financias</option>
<option value="7">Administrador</option>
</select> ');
        $($roleOption).append($selectList);

        $('img.add-role').click(function() {
            $(this).parent().append($roleOption);
        });
    });

Answer 1

I believe you are correct that the error is due to the line breaks returned by the server-side code because the resulting JavaScript is invalid since you can't have line breaks in a string literal like that. You need to remove those line breaks on the server-side. I'm not sure of the exact syntax, but something like this:

var $selectList = '@Html.DropDownList("role", DSS.WebUI.Helpers.CustomHelpers.SelectListItemsForRole(Model.ExistingRoles, 1)).Replace("\n","")';

You may need to chain an extra .Replace("\\r","") after the first replace. And you may need a .ToString() before the first .Replace() .

Beyond that though I think you have another problem because I suspect the following code isn't doing quite what you think it is:

$($roleOption).append($selectList);
$('img.add-role').click(function() {
    $(this).parent().append($roleOption);
});

The $roleOption and $selectList variables are both strings. When you do this:

$($roleOption).append($selectList);

jQuery will parse $roleOption to create a new jQuery object and then append the $selectList to that object, but you don't actually save a reference to the resulting object in a variable at all. So then within the .click handler when you append $roleOption it is just appending the original string. Probably you meant to do this:

$roleOption = $($roleOption).append($selectList);

Answer 2

You should be able to wrap $() around the html and it will be parsed by jQuery. I don't know exactly how MVC3 plays with this, but I would try:

var $selectList = $(' @Html.DropDownList("role", DSS.WebUI.Helpers.CustomHelpers.SelectListItemsForRole(Model.ExistingRoles, 1)).Replace("\n", "") ');

Edit: Due to the fact that @Html.DropDownList() returns multiple lines, you would need to remove them by adding .Replace("\\n", "") . I think.