javascript - Insert child tag at mouse position -

i have div element text and, possibly, other children tags inside (imgs, spans, etc). need following - when user clicks somewhere within div on text, child tag has inserted in position inside text. absolute positioning not option - need modify innerhtml of div.

for instance, if div is

<div>some text, more text</div> 

and user clicks right after "more", div should modified follows

<div>some text, more<span>new tag</span> text</div> 

you wrap each word/character in span , append new tag after one. letteringjs (http://letteringjs.com/) can that.

if you'd use inputs, use jcaret (http://www.examplet.org/jquery/caret.php) looks quite fancy, judging examples.