insertHTML with div and span tags in contenteditable section

javascript contenteditable html inserthtml
eliajf picture eliajf · Dec 18, 2012 · Viewed 7.9k times · Source

In a contenteditable div, I am attempting to use insertHTML to insert a special <div> and/or <span>. For whatever reason, this appears to not be allowed as insertHTML removes the div/span before inserting the remaining content. As an example:

document.execCommand('insertHTML', false, "<div class='btn equals'><a href='#'>=</a></div>");

Does anyone know a work-around or alternative method for doing what I'm trying to do? A custom tag works on WebKit but know that the concept isn't guaranteed to be supported in all browsers:

document.execCommand('insertHTML', false, "<btn_equals><a href='#'>=</a></btn_equals>");

Answer

Janak Nirmal picture Janak Nirmal · Jun 17, 2013

May be this is too late but I was in similar problem and we tried same thing as yours, and solution is not to include any single or double quite ' or " in text which is to be inserted

e.g. 

document.execCommand('insertHTML', true, "<div class=btnequals>this is test</div>");

Related questions

contenteditable change events

I want to run a function when a user edits the content of a div with contenteditable attribute. What's the equivalent of an onchange event? I'm using jQuery so any solutions that uses jQuery is preferred. Thanks!

Read More
Set cursor position on contentEditable <div>

I am after a definitive, cross-browser solution to set the cursor/caret position to the last known position when a contentEditable='on' <div> regains focus. It appears default functionality of a content editable div is to move the …

Read More
Prevent contenteditable adding <div> on ENTER - Chrome

I have a contenteditable element, and whenever I type some stuff and hit ENTER it creates a new <div> and places the new line text in there. I don't like this one little bit. Is it possible to …

Read More