JaveryでappendToがTextareaでうまく動作しないのはなぜですか？

Question

TextArea内にhtmlコードを追加したい（文字列のような構文だけ）。私は理由はわかりませんが、コードがうまくいきません。実際にコードを実行して、HTMLコードがテキストエリアに正しく追加されますが、テキストエリア内に何かを書くと、ボタンをクリックするか、ボタンを再クリックしてhtmlコードを追加しても何も起こりません！ここに私のテストバイオリン：
https://jsfiddle.net/jkLh0wat/1/
私もジャンゴを使用し、私の場合にはTEXTAREAはDjangoのフォームで与えられる（フォームで、私はテキストエリアのフィールドへのid「DESC」を使用）が、私は以来、Djangoの問題ではないと思うました

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<button type="button" class="btn btn-info btn-xs" id="link">link</button> 
<textarea id="desc" style="width:350px;height:200px;border:1px solid"><b>hello</b></textarea> 

<script> 
    $("#link").on('click', function() { 
     $(document.createTextNode("<a href='link'>titolo-link</a>")).appendTo($("#desc")); 
    }) 
</script> 

Answer 1

あなたの構文が正しくないため、問題がある：それは、これはコードです

.... HTML-jqueryの問題です。 textareaに何かを確実に追加することはできません。代わりにval()を使用して要素のvalueを設定する必要があります。あなたはこのように、jQueryのval()メソッドに関数を渡すことで値を追加するのと同じ効果を得ることができます：

$("#link").on('click', function() { 
 
    $('#desc').val(function(i, v) { 
 
    return v + '<a href="link">titolo-link</a>'; 
 
    }); 
 
});

#desc { 
 
    width: 350px; 
 
    height: 200px; 
 
    border: 1px solid 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button type="button" class="btn btn-info btn-xs" id="link">link</button> 
 
<textarea id="desc"><b>hello</b></textarea>

また、彼らは良い習慣ではないと私はインラインスタイルを削除することに注意してください。

私が使用する必要があります

：onclick="insertAtCaret('desc', '<b>hi</b>')"この場合にはすべてのものが商品を動作しますが、私は、この「titoloリンク」のようなものを入れたときに、引用符がエラーになります！その場合

あなたは、しかし、私が上記したよう、控えめなイベントハンドラを使用する方が良いだろう、/で引用符をエスケープすることができます。これを試してみてください：

$('#link').on('click', function() { 
    insertAtCaret('desc', '<a href="link">titolo-link</a>'); 
});