jquery - insert element over caret position

Question

I have a contentEditable div, inside this div I have a table.

Sample HTML:

<div id="divId" contenteditable="true">
   <table>
      <tbody>
         <tr>
            <td><br></td>
            <td>@param<br></td>
         </tr>
         <tr>
            <td><br></td>
            <td><br></td>
         </tr>
      </tbody>
    </table>
</div>

I want to insert an input element over caret position (selected cell in the table) - for example where @param is.

I used the $("#divId").append but that only insert the input in the end of the div and not where I need it.

Any help will be appreciated.

Answer 1

Have you tried this function ?

http://goo.gl/BdPd3k

function pasteHtmlAtCaret( html ) {
        var sel, range;
        if ( window.getSelection ) {
            // IE9 and non-IE
            sel = window.getSelection();
            if ( sel.getRangeAt && sel.rangeCount ) {
                range = sel.getRangeAt( 0 );
                range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement( "div" );
            el.innerHTML = html;
            var frag = document.createDocumentFragment(),
                node, lastNode;
            while ( ( node = el.firstChild ) ) {
                lastNode = frag.appendChild( node );
            }
            range.insertNode( frag );

            // Preserve the selection
            if ( lastNode ) {
                range = range.cloneRange();
                range.setStartAfter( lastNode );
                range.collapse( true );
                sel.removeAllRanges();
                sel.addRange( range );
            }
        }
    } else if ( document.selection && document.selection.type != "Control" ) {
        // IE < 9
        document.selection.createRange().pasteHTML( html );
    }
}