添加<img/> onclick会添加0而不是<img/>元素

Question

我在html中使用了div而不是输入，就是这个：

<div class="crazytext" name="msg" id="chatty" contenteditable="true"></div>

我有jq代码，当点击笑脸时，应该添加它做div。笑脸都是这样表现的

 <li><a class="smilepick" href="smile_1"><img src="emoticons/smile_1.png" class="emoticon_pick"></a></li>

其中有30个。它们被定义为变量，如下：

var smilies = { 
    smile_1 : '<img src="/emoticons/1.png"/>',
  smile_2 : '<img src="/emoticons/2.png"/>'
...
}

这是添加代码：

 $(".smilepick").click(function(event){
        event.preventDefault();
        $('#chatty').val($('#chatty').val()+(' ')+$(this).attr('href')+(' ')); 
        var el = $("#chatty").get(0);
        var elemLen = el.value.length;
        el.selectionStart = elemLen;
        el.selectionEnd = elemLen;
        el.focus();

        var linkValue = $(this).attr('href');
        $("#chatty").html((function(link) { return function(i, v) {
                return v.replace(link, smilies[link]);  
        }; })(linkValue));

        return false;
});

不是将元素添加到div，它应该放在哪里（如果有一些文本，应该将它添加到文本的末尾，就像环聊一样），它只是用0替换div中的所有文本，当div为空时它不会做任何事情。我无法想象我的生活中我做错了什么。如果我删除代码的底部部分，假设将任何“smile_x”转换为<img src="smile_x">，那么它的工作正常。

Answer 1

的 LIVE DEMO 的

var $chatty = $('#chatty');

$(".smilepick").click(function(event){
   event.preventDefault();

   var myHref = $(this).attr('href');
   $chatty.html( $chatty.html()+' '+ smilies[myHref] +' '); 

});