title: contenteditable, set caret at the end of the text (cross-browser)
body: <p>output in <strong>Chrome</strong>:</p>
  
  <pre><code>&lt;div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;"&gt;
      hey
      &lt;div&gt;what's up?&lt;/div&gt;
  &lt;div&gt;
  &lt;button id="insert_caret"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>I believe in <strong>FF</strong> it would look something like this:</p>
  
  <pre><code>hey
  &lt;br /&gt;
  what's up?
  </code></pre>
  
  <p>and in <strong>IE</strong>:</p>
  
  <pre><code>hey
  &lt;p&gt;what's up?&lt;/p&gt;
  </code></pre>
  
  <p>unfortunately, there is no nice way of making it so that every browser inserts a <code>&lt;br /&gt;</code> instead of a div- or p-tag, or at least I couldn't find anything online.</p>
  
  <hr>
  
  <p>ANYWAY, what I am trying to do now is, when I hit the <strong>button</strong>, I want the caret to be set at the end of the text, so it should look something like this:</p>
  
  <pre><code>hey
  what's up?|
  </code></pre>
  
  <p>any way to do this so it works in <strong>all browser</strong>?</p>
  
  <p>example:</p>
  
  <pre><code>$(document).ready(function()
  {
      $('#insert_caret').click(function()
      {
          var ele = $('#content');
          var length = ele.html().length;
  
          ele.focus();
  
          //set caret -&gt; end pos
       }
   }
  </code></pre>