How do i insert a div inside the content of another content-editable div? The parent div is a content-editable one and its contains string content. I want to insert another content-editable div when i type '@' at the cursor position.

for example,

 <div id="target" class="text-area" contenteditable='true'>This text can be anything... how to insert a div when i type start typing @... </div>

I want to insert another div when i type '@'? How can i achieve this?

Here is what i tried out JSBIN

Please help me. Thanks in advance