title: Adding html at a specific position
body: <p>I have div with contenteditable:</p>
  
  <pre><code>&lt;div class="example" contenteditable="true"&gt;This is an example&lt;/div&gt;
  </code></pre>
  
  <p>Using <code>innerHTML</code>, I get "This is an example".</p>
  
  <p>Now at 7th position (right after "is"), I want to add a html (<code>&lt;span class="yup"&gt;NOT&lt;/span&gt;</code>) to give the following (either using <code>click</code>, <code>focus</code> what-not)</p>
  
  <pre><code>&lt;div class="example" contenteditable="true"&gt;This is &lt;span class="yup"&gt;NOT&lt;/span&gt; an example&lt;/div&gt;
  </code></pre>
  
  <p>Knowing the caret position and innerHTML, how would I add a html into it?</p>
  
  <p>I thought about using <code>substr</code> then <code>.html(content)</code>, but that's replacing the whole content and I want to avoid it. I want to simply add a content directly at a specific position.</p>
  
  <p>For example: Replacing the whole content and what I DON'T want to do.</p>
  
  <pre><code>c = c.substr(0, e) + '&lt;span class="yup"&gt;NOT&lt;/span&gt;' + c.substr(e)';
  $("div.example").html(c);
  </code></pre>
  
  <p>Instead of replacing it, I want to just "inject" it.</p>
  
  <p>Any suggestions will be much appreciated.</p>