<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<button type="button" onclick="insertHtmlAtCaret('<span>插入成功</span>');">插入字符
</button>
<div contentEditable="true" id="test1" style="height:50px; border:2px solid red;" >111111111111111111111111</div>
<div contentEditable="true" style="height:50px; border:2px solid red;" >222222222222222222222222</div>
<script>
    function insertHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                var el = document.createElement("div");
                el.innerHTML = html;
                var frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            document.selection.createRange().pasteHTML(html);
        }
    }
</script>