insertNodeAtCaret

by Seth Van Booven

HTML

<div class="pen" contenteditable="true">Here is some editable text</div>
<input type="button" 
onclick="insertNodeAtCaret(document.createTextNode('[INSERTED]'));" value="Insert node">

CSS

body { font:1rem/1.5 sans-serif;  margin:2rem; }
div {
    border:thin solid #ddd;
    padding:1rem;
    margin:1rem 0;
    color:black;
    font-size:1rem;
}

JavaScript

function insertNodeAtCaret(node) {
  var sel = window.getSelection();
  if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    range.collapse(false);
    range.insertNode(node);
    range = range.cloneRange();
    range.selectNodeContents(node);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
  }
}