jQuery append()在textarea标签的替代方法

在jquery官方的说明里append()是用于在被选元素的结尾插入内容，而最开始我想实现一个在文本框里追加表情的功能，理所当然的想到这个方法，就是获取标签代码，然后添加到输入的文字之后。然后问题就出现了，append()只能在文本框为空，且没有修改过的情况下才可以正常运行，否则是怎么点击都没有反应，控制台也不会出现报错。
搜索了很久，才找到可以替代的方法，其实就是利用val()，决定记录下来。

原本的代码如下：

$("body").on("click",".emoji-box img",function () {
    var emoji = $(this).attr("data-emoji");
    $("#chat-text").append("[!"+emoji+"!]");
});

我的想法很简单，给表情图片设置data-emoji属性，然后通过append方法，输入[!图片代码!]的格式，结果理所当然是不行的。

修改后的代码如下

$("body").on("click",".emoji-box img",function () {
    var emoji = $(this).attr("data-emoji");  //通过自定义属性获取表情代码
    var str = $("#chat-text").val();  //读取当前文本框里面的值
    if (str == undefined){  //如果文本框值为undefined，则输入为空
        str="";
    }
    var text = str + "[!"+emoji+"!]";  //在文本框的值后加上表情的代码格式
    $("#chat-text").val(text);  //最后再直接输入到文本框，覆盖原本的值
});

总的来说，其实还算简单