Is there a way to keep execCommand("insertHTML") from removing attributes in chrome?

javascript contenteditable execcommand

In this particular case I would suggest using Range.insertNode instead, which will give you total control of what gets inserted:

function insertHTML() {    var sel, range;    if (window.getSelection && (sel = window.getSelection()).rangeCount) {        range = sel.getRangeAt(0);        range.collapse(true);        var span = document.createElement("span");        span.id = "myId";        span.appendChild( document.createTextNode("hi") );        range.insertNode(span);        // Move the caret immediately after the inserted span        range.setStartAfter(span);        range.collapse(true);        sel.removeAllRanges();        sel.addRange(range);    }}

Show code snippet

function isOrIsAncestorOf(ancestor, descendant) {  var n = descendant;  while (n) {    if (n === ancestor) {      return true;    } else {      n = n.parentNode;    }  }  return false;}function nodeContainsSelection(node) {  var sel, range;  if (window.getSelection && (sel = window.getSelection()).rangeCount) {    range = sel.getRangeAt(0);    return isOrIsAncestorOf(node, range.commonAncestorContainer);  }  return false;}function insertHTML() {  var sel, range;  if (window.getSelection && (sel = window.getSelection()).rangeCount) {    range = sel.getRangeAt(0);    range.collapse(true);    var span = document.createElement("span");    span.id = "myId";    span.appendChild( document.createTextNode("hi") );    range.insertNode(span);    // Move the caret immediately after the inserted span    range.setStartAfter(span);    range.collapse(true);    sel.removeAllRanges();    sel.addRange(range);  }}window.onload = function() {  document.getElementById("inserter").onmousedown = function() {    var editor = document.getElementById("editor");    if (nodeContainsSelection(editor)) {      insertHTML();      return false;    }  };};

span {  font-weight: bold;  color: green;}

<input type="button" id="inserter" value="Insert span"><div contenteditable="true" id="editor">    some content</div>

Expand snippet