在插入符号位置插入HTML，而不创建对象

Question

I have contenteditable div, and span with text inside.

<div contenteditable="true"><span> Some text.. </span></div>

I need insert in place of caret closing and opening span tags. Like:

<div contenteditable="true"><span> Some </span><span> text.. </span></div>

I tried to make it by insertHTML:

document.execCommand('insertHTML', false, '</span><span>');

It works in Crome, but Firefox makes span object and insert here (inserts a valid html). It turns out:

<div contenteditable="true"><span> Some <span></span> text.. </span></div>

Does anyone know how to split the span tag inside contenteditable div? Thanks in advance

Answer 1

You could just use the innerHTML property to insert any HTML code, here's an example using javascript:

document.getElementById("myDiv").innerHTML = "<span>Here is the new Content!</span>";

And give your div the id="myDiv" .