Javascript 在其中插入HTML时拆分跨度

我有一个设置，其中有大量格式化为HTML的文本（包含标题和段落）–都在

contenteditable

div中。我设置了一个函数，可以在单击按钮时将自定义HTML实体插入到可编辑div中：

。这非常有效，除了在跨距内插入注释时，我需要将跨距一分为二，并将

放在它们之间

我已经研究了很多在web上用于向DIV中插入文本的函数，因为我需要插入HTML，所以它看起来像

document。createTextNode（）

是我唯一的选择

这是我到目前为止设置的，它检查父对象是否是一个跨度，然后根据if语句放置不同的内容

function insertNodeAtRange() {
  var newRange = rangy.getSelection().getRangeAt(0);
  var parentElement = newRange.commonAncestorContainer;
  if (parentElement.nodeType == 3) {
      parentElement = parentElement.parentNode;
  }
  var el = document.createElement('newnote');
  el.className = "bold";
  if (parentElement.tagName == 'SPAN') {
      el.appendChild(document.createTextNode(" </span>Test<span> "));
  } else {
      el.appendChild(document.createTextNode(" Test "));
  }
  newRange.insertNode(el);
}

函数insertNodeAtRange（）{
var newRange=rangy.getSelection（）.getRangeAt（0）；
var parentElement=newRange.commonAncestorContainer；
if（parentElement.nodeType==3）{
parentElement=parentElement.parentNode；
}
var el=document.createElement（'newnote'）；
el.className=“bold”；
如果（parentElement.tagName==“SPAN”）{
el.appendChild（document.createTextNode（“Test”）；
}否则{
el.appendChild（document.createTextNode（“Test”）；
}
插入节点（el）；
}

---

提前感谢您的帮助…

代码的主要问题是您试图通过创建文本节点来生成/修改html。文本节点不会被解析为dom

这应该适合您：

函数insertNodeAtRange（）{
var newRange=rangy.getSelection（）.getRangeAt（0）；
var parentElement=newRange.commonAncestorContainer；
if（parentElement.nodeType==3）{
parentElement=parentElement.parentNode；
}
var el=document.createElement（'newnote'）；
el.className=“bold”；
el.appendChild（document.createTextNode（“Test”）；
插入节点（el）；
如果（parentElement.tagName==“SPAN”）{
变量$newnote=$（el）；
变量$span1=$（“”）；
变量$span2=$（“”）；
var left=真；
$parentElement=$（parentElement）；
$parentElement.contents（）.each（函数（i，节点）{
if（节点isSameNode（el））{
左=假；
}else if（左）{
$span1.追加（节点）；
}否则{
$span2.追加（节点）；
}
});
$parentElement.replaceWith（$newnote）；
$span1.插入之前（$newnote）；
$span2.插入符（$newnote）；
}
}

---

我只是直接插入了

newnote

元素，然后将之前的内容放入span1，将之后的内容放入span2，将现有的span替换为newnote，并将新的span定位在newnote周围。

不是html实体<代码>内容表拼写错误。父类型未定义。你试图创建无效的HTML。我的答案对你有用吗？@smerny你是我的英雄！再次感谢！

function insertNodeAtRange() {
    var newRange = rangy.getSelection().getRangeAt(0);
    var parentElement = newRange.commonAncestorContainer;
    if (parentElement.nodeType == 3) {
        parentElement = parentElement.parentNode;
    }
    var el = document.createElement('newnote');
    el.className = "bold";
    el.appendChild(document.createTextNode(" Test "));
    newRange.insertNode(el);
    if (parentElement.tagName == 'SPAN') {
        var $newnote = $(el);
        var $span1 = $("<span>");
        var $span2 = $("<span>");
        var left = true;
        $parentElement = $(parentElement);
        $parentElement.contents().each(function (i, node) {
            if (node.isSameNode(el)) {
                left = false;
            } else if (left) {
                $span1.append(node);
            } else {
                $span2.append(node);
            }
        });
        $parentElement.replaceWith($newnote);
        $span1.insertBefore($newnote);
        $span2.insertAfter($newnote);
    }
}