Split content paragraph where cursor is located - Javascript

Question

I have a contenteditable div:

<div id="formatted" contenteditable="true">
    <p>
       Here is some <b>content</b> warpped in paragraph.
    </p>
</div>

<input id="spliter" type="submit" value="spliter">

I want to set the cursor somewhere in pharagraph, for example, after the word "wrapped", then click on "spliter" and after this paragraph you need to divide it into two paragraphs as follows:

 <div id="formated" contenteditable="true">
    <p>
       Here is some <b>content</b> 
    </p>
    <p>
       wrapped in paragraph.
    </p>
 </div>

I have this code:

jQuery(document).ready(function(){
    jQuery("spliter").click(function(){
        var s = window.getSelection();
        s.modify('extend','backward','paragraph');        
        var before = s.toString(); //here is text before cursor

        s.modify('extend','forward','paragraph');
        var after = s.toString(); //here is text after cursor
    });
});

In the variable before the text before the cursor "Here is some content" and in the variable after I have the text "wrapped in a paragraph" after the cursor. so I can create two new paragraphs and replace them with old ones.

, b, toString() , html. Html, : "b", "em", "i", "strong", "u", "p", "ul", "li", "ol".

, html ???

Answer 1

, , . , .

var elem = document.createElement("div");
if (s.rangeCount) elem.appendChild(s.getRangeAt(0).cloneContents());
before = elem.innerHTML;