title: Dealing with line Breaks on contentEditable DIV
body: <p>I have a problem with <code>contenteditable</code> line breaks on SAFARI/CHROME. When I press "return" on a contentEditable <code>&lt;div&gt;</code>, instead of creating a <code>&lt;br&gt;</code> (like Firefox), they create a new <code>&lt;div&gt;</code>:</p>
  
  <pre><code>&lt;div&gt;Something&lt;/div&gt;
  &lt;div&gt;Something&lt;/div&gt;
  </code></pre>
  
  <p>That looks like (on the contentEditable DIV):</p>
  
  <pre><code>Something
  Something
  </code></pre>
  
  <p>But after sanitization (removing <code>&lt;div&gt;</code>), I get this:</p>
  
  <pre><code>SomethingSomething
  </code></pre>
  
  <p>In Firefox, the <code>contenteditable</code> is:</p>
  
  <pre><code>Something
  &lt;br&gt;
  Something
  </code></pre>
  
  <p>And that after sanitization looks the same:</p>
  
  <pre><code>Something
  Something
  </code></pre>
  
  <p>Is there any solution to "normalize" this across browsers?</p>
  
  <p>I've found this code on <a href="https://stackoverflow.com/questions/3080529/make-a-br-instead-of-div-div-by-pressing-enter-on-a-contenteditable">Make a &lt;br&gt; instead of &lt;div&gt;&lt;/div&gt; by pressing Enter on a contenteditable</a></p>
  
  <pre><code>$(function(){
  
    $("#editable")
  
    // make sure br is always the lastChild of contenteditable
    .live("keyup mouseup", function(){
      if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
        this.appendChild(document.createChild("br"));
       }
    })
  
    // use br instead of div div
    .live("keypress", function(e){
      if (e.which == 13) {
        if (window.getSelection) {
          var selection = window.getSelection(),
            range = selection.getRangeAt(0),
            br = document.createElement("br");
          range.deleteContents();
          range.insertNode(br);
          range.setStartAfter(br);
          range.setEndAfter(br);
          range.collapse(false);
          selection.removeAllRanges();
          selection.addRange(range);
          return false;
        }
      }
    });
  });
  </code></pre>
  
  <p>This works, but <strong>(in SAFARI and CHROME)</strong> I have to press two times the "return" key to get a new line... </p>
  
  <p>Any idea?</p>
  
  <p><strong>Edit</strong>: With the code I found ( at the bottom of this question) is working fine except the function that "makes sure a <code>&lt;br&gt;</code> element is always the lastChild... Any idea on how to fix this?</p>
  
  <p><strong>Edit 2:</strong> I'm getting this error on the console: <code>Uncaught TypeError: Object #&lt;HTMLDocument&gt; has no method 'createChild'</code></p>
  
  <p><strong>Edit 3:</strong> Ok, I changed the <code>document.createChild("br");</code> to <code>document.createElement("br");</code> and I think I got it working in FF/Safari/Chrome... All return <code>&lt;br&gt;</code> for new lines... </p>
  
  <p><strong>The problem is now that when I'm inside an Ordered or Unordered List, I need to get a new line without <code>&lt;br&gt;</code>...</strong></p>
  
  <p><strong>Edit 4:</strong> If anyone interested in the solution of the last edit: <a href="https://stackoverflow.com/questions/6024594/avoid-createelement-function-if-its-inside-a-li-element-contenteditable">Avoid createElement function if it&#39;s inside a &lt;LI&gt; element (contentEditable)</a></p>