How to pass text <li> without replacing text in a text field

Question

Today I have homework at home. I can pass emoji to the text box already, but it will replace the previous emoji or text in the text box if I click. I want to know how not to replace the text of a text field if I clicked and was able to save the input text or text. Sorry for my bad english if you guys don't understand.

$(document).ready(function () {
    $("ul").hide();
    $("input.btnemoji").click(function () {
        $("ul").toggle();
        $("ul.emoji li").click(function () {
            $("#ToSend").val($(this).text());
        });
    });
});

<asp:Textbox id="ToSend" runat="server" Width="300px"></asp:Textbox>
<input type="button" class="btnemoji" value="&#x1F600;" />
<ul class="emoji">
    <li>😀</li>
    <li>😂</li>
    <li>😎</li>
    <li>😍</li>
    <li>😁</li>
</ul>

Answer 1

To add an existing value, you need to add to val()in inputinstead of replacing it each time. To do this, you can pass the function to a method val()that handles the addition for you, for example:

$(document).ready(function() {
  $("ul").hide();

  $("input.btnemoji").click(function() {
    $("ul").toggle();
  });

  $("ul.emoji li").click(function() {
    var $li = $(this);
    $("#ToSend").val(function(i, v) {
      return v + $li.text();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ToSend" width="300px">
<input type="button" class="btnemoji" value="&#x1F600;" />
<ul class="emoji">
  <li>😀</li>
  <li>😂</li>
  <li>😎</li>
  <li>😍</li>
  <li>😁</li>
</ul>

, $("ul.emoji li").click() .btnemoji, , ul.

Answer 2

. , , :

$("#ToSend").val($("#ToSend").val()+$(this).text());

$(document).ready(function () {
    $("ul").hide();
    $("input.btnemoji").click(function () {
        $("ul").toggle();
    });
    $("ul.emoji li").click(function () {
        $("#ToSend").val($("#ToSend").val()+$(this).text());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ToSend"/>
<input type="button" class="btnemoji" value="&#x1F600;" />
<ul class="emoji">
    <li>😀</li>
    <li>😂</li>
    <li>😎</li>
    <li>😍</li>
    <li>😁</li>
</ul>

Answer 3

$("#ToSend").append($(this).text());

User adds function without using