javascript - リンク要素を追加すると段落が 2 つに分割される

Question

この厄介な問題は Firefox でのみ発生します。link 要素を contentEditable 段落に追加すると、段落が 2 つまたは 3 つに分割されることがあります。これはエラーを表示せず、場合によっては数秒かかります。コードは次のとおりです。

function changeSelectedText(type,text) {
  var selObj = window.getSelection();
  var selRange = selObj.getRangeAt(0);
  var newElement = document.createElement(type);
  if(type == "a") {
    newElement.setAttribute('href', text.toLowerCase());
    newElement.setAttribute('target', "_blank");
  } else if(type == "span"){
    newElement.setAttribute('class', "big");
  }
  var documentFragment = selRange.extractContents();
  newElement.appendChild(documentFragment);
  selRange.insertNode(newElement);
  var range = document.createRange();
  range.selectNodeContents(newElement);
  selObj.removeAllRanges();
  selObj.addRange(range);
}

スパンを追加すると完全に機能しますが、リンクを使用すると、この奇妙な動作が発生することがあります。理由はありますか？

マイクが提案したようなjsfiddleへのリンクは次のとおりです： jsfiddleリンク