Add content at caret position in contentEditable div

Question

I am trying to add content at caret position in editable div.

<div class="pull-left text-center">
    <a class="dropdown-toggle" data-toggle="dropdown" id="content1" href="#">Simple
    </a>
</div>
<div class="pull-left text-center">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">MouseOver </a>
    <ul class="dropdown-menu">
        <li>
            <div onclick="AddContent()">
                Add</div>
        </li>
    </ul>
</div>
<div id="form" contenteditable="true" style="height: 500px;">
</div>


<script type="text/javascript">

    $('#content1').click(function () {
        $('#form').focus();
        pasteHtmlAtCaret('<b>ABCD</b>', false);
    });

    function AddContent() {
        document.getElementById('form').focus();
        pasteHtmlAtCaret('<b>ABCD</b>', false);
    }


    function pasteHtmlAtCaret(html, selectPastedContent) {
        var sel, range;
        if (window.getSelection) {
            // IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {

                range = sel.getRangeAt(0);
                range.deleteContents();

                // Range.createContextualFragment() would be useful here but is
                // only relatively recently standardized and is not supported in
                // some browsers (IE9, for one)
                var el = document.createElement("div");
                el.innerHTML = html;
                var frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                var firstNode = frag.firstChild;
                range.insertNode(frag);

                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    if (selectPastedContent) {
                        range.setStartBefore(firstNode);
                    } else {
                        range.collapse(true);
                    }
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if ((sel = document.selection) && sel.type != "Control") {
            // IE < 9

            var originalRange = sel.createRange();
            originalRange.collapse(true);
            sel.createRange().pasteHTML(html);
            if (selectPastedContent) {
                range = sel.createRange();
                range.setEndPoint("StartToStart", originalRange);
                range.select();
            }
        }
    }
</script>

By clicking on Simple, it add content at caret position which is fine, but when I click on Add every time it add content at start position of document. How would I go about doing this? Thanks.