Adding DOM elements using contentEditable

I've created an editable div, and I want to replace smiley signs with smiley images.

But whenever I replace a string with a dom element (<img> or <span> or whatever..), the div stops being editable (i.e. I can see the caret when I click on text, but can add no characters to it).

What's going on? (I'm doing this in Safari)

Here's my code:

var txtInput = document.getElementById("asdf");
txtInput.contentEditable = true;
txtInput.addEventListener("textInput", fu开发者_如何学运维nction(event){
    var str = txtInput.innerHTML;
    txtInput.innerHTML = str.replace("f", "<span>w<span>"); 
}, false);

I think you should be using execCommand with inserthtml or insertimage, though I can't get either of them to work myself at the moment.