jQueryオブジェクトにHTML要素を保存するにはどうすればよいですか？

Question

私は画像クリックでこれらの別のものを追加しようとしています：

<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> 

そして、ここで私は追加画像がクリックされるたびに新しい.roleoptionを作成しようとしています：

<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> 

あなたがそこまで見MVC3コードは、ビュー上で次のスクリプトを生成しレンダリング：

<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> 

を私は次のエラーを取得する：

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

このコードをクリーンアップするにはどうすればよいですか？

私のHTMLヘルパーがマルチラインとしてselect要素を返すという問題があると思いますが、どうすればこの事実を回避できますか？

編集：

私が行う場合：

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

私が手：

$(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

このような文字列リテラルに改行を入れることができないため、結果のJavaScriptが無効であるため、サーバーサイドコードによって返される改行が原因でエラーが発生していると思われます。これらの改行はサーバー側で削除する必要があります。私は、正確な構文のわからないんだけど、このような何か：最初は、交換後

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

あなたはチェーン余分.Replace("\r","")する必要があるかもしれません。 の前にの最初の.Replace()が必要な場合があります。その向こう

私はあなたが別の問題を抱えていると思いますけれども、私は疑っているので、次のコードは、あなたがそれだと思うものをかなりやっていません。

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

$roleOptionと$selectList変数は、両方の文字列です。これを行うと：

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

jQueryのは、新しいjQueryオブジェクトを作成し、そのオブジェクトへの$selectListを追加する$roleOptionを解析しますが、実際には全く変化が生じたオブジェクトへの参照を保存しないでください。したがって、.clickハンドラ内で$roleOptionを追加すると、元の文字列が追加されます。おそらく、あなたはこれを行うことを意味しました：

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

Answer 2

あなたがhtmlの周り$()をラップすることができるはず、それはjQueryので解析されます。私はMVC3はこれで果たしている正確にどのように知りませんが、私はしようとするだろう：

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

は編集：原因@Html.DropDownList()が複数行を返すという事実のために、あなたは.Replace("\n", "")を追加することによって、それらを削除する必要があります。おもう。