Добавление <img> onclick добавляет 0 вместо элемента <img>

У меня есть div в html, который я использую вместо ввода, это одно:

<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. Они определяются как vars, например:

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, где он должен (если какой-то текст там, должен добавить его в конец текста, так же, как и видеовстречи), он просто заменяет весь текст в div на 0, или он не делает ничего не делайте, когда div пуст. Я не могу понять, что я делаю неправильно. Если я удалю нижнюю часть кода, которая предполагает преобразование любого "smile_x" в <img src="smile_x">, он работает просто отлично.