title: how to use insertAtCaret function with a div
body: <p>I'm using insertAtCaret function and it works well with a text area.
  I'm searching for a solution to change the text area by a content editable div. I changed the text area by a div but it doesn't work.</p>
  
  <pre><code><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready( function() 
      {
       $('#list li').click(function() { 
        $("#mytextarea").insertAtCaret($(this).text());
        return false
       });
      });
  
      $.fn.insertAtCaret = function (myValue) {
       return this.each(function(){
         //IE support
         if (document.selection) {
           this.focus();
           sel = document.selection.createRange();
           sel.text = myValue;
           this.focus();
         }
         //MOZILLA / NETSCAPE support
         else if (this.selectionStart || this.selectionStart == '0') {
           var startPos = this.selectionStart;
           var endPos = this.selectionEnd;
           var scrollTop = this.scrollTop;
           this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
           this.focus();
           this.selectionStart = startPos + myValue.length;
           this.selectionEnd = startPos + myValue.length;
           this.scrollTop = scrollTop;
         } else {
           this.value += myValue;
           this.focus();
         }
       });
      };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #sidediv li{cursor:pointer;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;div id="sidediv"&gt;
          &lt;ul id="list"&gt;
            &lt;li&gt;Client first name&lt;/li&gt;
            &lt;li&gt;lastname&lt;/li&gt;
            &lt;li&gt;username&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;textarea name="mytextarea" id="mytextarea" cols="70" rows="10"&gt;Hello!&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  
  </code></pre>