JavaScriptを使用してhtml.TextAreaForを動的に追加する

Question

モーダルボディにテキストエリアエレメント（TextAreaForを使用）を追加しようとしています。デモンストレーションのために、私は2つのボタンを持っています。クリックすると、TextBoxFor要素がモーダルボディに追加されます。他のボタンがクリックされると、TextAreaFor要素が代わりに追加されます。

TextBoxForはうまく動作しますが、テキスト領域を適切にレンダリングすることに問題があります。私はJavaScriptの初心者ですが、最終の '>'に達する前に、textarea要素の終了タグが文字列を終了させて​​いるようです。

だから、ボタンがクリックされた、とhtmlが追加されます：

btn.onclick = function() { 
$('.modal-body').html('<label>Question Label</label>@Html.TextAreaFor(c => c.Response, new { @class = "form-control" })'); 
modal.style.display = "block"; 
} 

しかし、これはのように表示されます。： 'X' 私は」キャッチされないでSyntaxErrorを取得していたされている状態で

$('.modal-body').html('<label>Question Label/label><textarea class="form-control" cols="20" id="Response" name="Response" rows="2">X 
</textarea> 

無効または予期しないトークン "エラーです。それを回避する方法についてのアドバイスは、大いに感謝しています。

Answer 1

あなたはカウンタ変数が5以下のテキストエリアが追加されていることを確認することです

$(document).ready(function(){ 
 
    var counter=0; 
 
    $("#addButton").click(function() { 
 
    
 
    if(counter>=5){ 
 
    alert("you can insert only 5 textareas")} 
 
    else{ 
 
    
 
var newTextBoxDiv = $(document.createElement('div')) 
 
     .attr("id", 'TextBoxDiv'); 
 

 
newTextBoxDiv.after().html('<label>Question Label </label>' + '<textarea rows=5 cols=50 name="textbox" id="textbox" value="" >'); 
 

 
    newTextBoxDiv.appendTo("#TextBoxesGroup"); 
 
    counter++; 
 
    } 
 
    }) 
 
    
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='TextBoxesGroup'> 
 
    <div id="TextBoxDiv1"> 
 
    <label>Textbox #1 : </label><input type='textbox' id='textbox1' > 
 
    </div> 
 
</div> 
 
<input type='button' value='Add Button' id='addButton'>

ような何かを試すことができます。