why in Jquery appendTo doesn't work well on Textarea?

Question

I want append inside a TextArea some html code (just the syntax, like a string). I don't know the reason but my code doesn't work well, in fact If I run the code and I press the button than the html code will append into the textarea correctly but if I write something inside the textarea and after I try to click or re-click the button to append the html code nothing happen! Here my test fiddle:
https://jsfiddle.net/jkLh0wat/1/
I also use Django, in my case textarea was given by django form (in the form I use an id "desc" to the textarea field) but I think isn't a Django problem since it is a html-jquery problem....

this is the code:

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

`into a textarea` - as in inside the textarea? because you need to use `.val()` to target the inner text area, append to will place it after the textarea ends — treyBake, Jun 23 '17 at 14:20
Textareas can't contain HTML, only text. And in jQuery you don't need to use `createTextNode`. A simple `$("titolo-link")` creates the node. But as the comment above mentions, a textarea's content is governed by its value attribute. — j08691, Jun 23 '17 at 14:20

Rory McCrossan · Accepted Answer · 2017-06-23T14:44:01.113

The issue is because your syntax is incorrect. You cannot reliably append anything to a textarea. Instead you need to set the value of the element by using val(). You can achieve the same effect as appending a value by passing a function to jQuery's val() method, like this:

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

Also note that I removed the inline styles as they are not good practice.

I must use: onclick="insertAtCaret('desc', '<b>hi</b>')" in this case everything works goods but when I put something like this "titolo-link" the quotation marks become an error!

In that case you can escape the quotes with /, however it would be better to use an unobtrusive event handler, as I did above. Try this:

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

THANKS!!!! is there a way to append html code in the cursor position? I mean I click inside the textarea for example in the middle and when I press the button the html code will append in that position? — lausent, Jun 23 '17 at 14:28
Yes, although it's not a simple process: https://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery — Rory McCrossan, Jun 23 '17 at 14:29
I use the code and it work but there is a big problem I must use: onclick="insertAtCaret('desc', 'hi')" in this case everything works goods but when I put something like this "titolo-link" the quotation marks become an error! — lausent, Jun 23 '17 at 14:41
You can escape the quotes, or better yet, use an unobtrusive event handler to call that function on button click. — Rory McCrossan, Jun 23 '17 at 14:42

why in Jquery appendTo doesn't work well on Textarea?

1 Answers1