title: jQuery: Split text at mouse-click position
body: <p>I'm trying to program something like a textarea, just for training.</p>
  
  <p>I have a div with (user-generated) text in it:</p>
  
  <pre><code>&lt;div id="editor"&gt;Hello! I am a Text!&lt;/div&gt;
  </code></pre>
  
  <p>If I click (with left mousebutton) between the two "L" of "Hello", for example, I'd like to see this:</p>
  
  <pre><code>&lt;div id="editor"&gt;Hel&lt;div id="cursor"&gt;|&lt;/div&gt;lo! I am a Text!&lt;/div&gt;
  </code></pre>
  
  <p>How do I achieve this? Until now, I'm doing it with...</p>
  
  <pre><code>//HTML
  &lt;div id="editor" onclick="setCursorWithMouse()"&gt;&lt;!-- User-Text --&gt;&lt;/div&gt;
  
  //jQuery
  function setCursorWithMouse(){
      $('#editor').append('&lt;div id="cursor"&gt;|&lt;/div&gt;');
  }
  </code></pre>
  
  <p>...but, of course, it just adds the cursor at the end of the div.</p>
  
  <p>How can I know where exactly the user clicked, where to add my cursor (or whatever), where to split the text?</p>
  
  <p>Thanks</p>
  
  <p>Edit:</p>
  
  <ul>
  <li><p>I do not want to use contenteditable! Just look at it this way: I want to split a string at the mouse-click position.</p></li>
  <li><p>I know .append() is not what I'm looking for! .append() was just a Placeholder for a later, better, function. THIS function I'm right now asking for.</p></li>
  <li><p>I use a fixed-width font.</p></li>
  </ul>