document.execCommand of insertText not working in IE

Question

I am trying to so hard to dig out the solution to my problem from last week. document.execCommand('insertText', false, emo) this code line is working for all browser except IE (Internet Explorer 11). For IE, I have written the method insertTextAtCursor which is inserting always first in content editable.

My problem is, How could I insert the text into contentEditable at the cursor point for IE? Thanks in advance.

var insertTextAtCursor = function (html) {
    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
        // non-standard and not supported in all browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerText = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ((node = el.firstChild)) {
          lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
          range = range.cloneRange();
          range.setStartAfter(lastNode);
          range.collapse(false);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
    } else if (document.selection && document.selection.type != "Control") {
      // IE < 9
      document.selection.createRange().pasteHTML(html);
    }
  };

Answer 1

document.execCommand('insertText', false, emo)

Not found the above code from the insertTextAtCursor function, when and where you are using the insertTextAtCursor function and the execCommand method? From this article , it seems that the execCommand method support IE browser. And, I have create a sample using your code, it seems that everything works well, please check it:

<div id="thing" contenteditable="true" style="width:200px; border :1px solid black; cursor:pointer">
    this is a some random foo bar jumps over a stick test
</div>

<input type="button" value="Add" onclick="insertTextAtCursor('aaaa');" />
<script>
    var insertTextAtCursor = function (html) {
        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
                // non-standard and not supported in all browsers (IE9, for one)
                var el = document.createElement("div");
                el.innerText = html;
                var frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);

                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(false);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    };
</script> 

The output as below: