JavaScript - Split Parent of Selection

Question

Using JavaScript (and potentially Rangy) I am trying to create a utility function that will allow me to "split" an element based on the selection and a selector that I pass in. For instance, let's say we had the following:

<div class="designer" contenteditable="true">
    <div class="content">
        <p>
            Here is <span style="color: pink;">some cool</span> stuff.
        <p>
    </div>
</div>

Now let's say the user had their cursor between "some" and "cool". I want to be able to call a function like this:

$splitParent('p'):

which would yield the following:

<div class="designer" contenteditable="true">
    <div class="content">
        <p>
            Here is <span style="color: pink;">some</span>
        <p>
        <p>
            <span style="color: pink;"> cool</span> stuff.
        <p>
    </div>
</div>

and similarly calling this:

$splitParent('.content');

would yield this:

<div class="designer" contenteditable="true">
    <div class="content">
        <p>
            Here is <span style="color: pink;">some</span>
        <p>
    </div>
    <div class="content">
        <p>
            <span style="color: pink;"> cool</span> stuff.
        <p>
    </div>
</div>

I haven't been able to think of a straight-forward way of accomplishing this. Any ideas?