Javascript 插入节点'；在'；范围'；：文档上只允许有一个元素

Hii我正在循环中插入一个节点，但在“范围”上出现错误“insertNode”：文档中只允许一个元素。“”。我有两种类型的数据，一种在单div中，另一种在div中，有很多跨度。所以在第二类数据中，它给出了一个错误

下面的代码，我正在使用

$(document).ready(function(){
  var x;
  var url = window.location.pathname;
  var urlid = url.substring(url.lastIndexOf('/') + 1);
    
  $.ajax({
  type:'GET',
  url:'/check-words',
  data:{urlid:urlid},
  success:function(data){
   for (var x of data) 
   {
    var jsondata = x + '';
    var nameArr = jsondata.split(',');
    var a = nameArr[0];
    var b = nameArr[1];
    
    highlight($('.main-detail-content'), a, b);
   }
  }
 })
}); 


function highlight(element,st,en)
{
    range = document.createRange();
     
    dig(element,st,en,range,0);
    
    s.addRange(range);

    var ra = s.getRangeAt(0);  
    var newNode = document.createElement("em");
    newNode.appendChild(ra.extractContents());
    ra.insertNode(newNode);

    s.removeAllRanges();
   
}



function dig(el,start,end,range,pos)
{
    $(el).contents().each(function(i,e){
        if (e.nodeType==1){
            pos = pos+ e.innerHTML.length;
            
         // dig(e,start,end,range,pos);   
        }
        else
        {
            if (pos < start){
               if (pos +  e.length >= start){
                range.setStart(e, start - pos); 
               }
            }
            
            if (pos < end)
            {
               if (pos + e.length >= end)
               {
                range.setEnd(e, end - pos);
                return false;
               }
            }            
            
            pos = pos+e.length;
        }
    });
}

$（文档）.ready（函数（）{
var x；
var url=window.location.pathname；
var urlid=url.substring（url.lastIndexOf（'/'）+1）；
$.ajax({
类型：'GET'，
url:“/检查单词”，
数据：{urlid:urlid}，
成功：功能（数据）{
用于（数据的var x）
{
var jsondata=x+“”；
var nameArr=jsondata.split（'，'）；
变量a=nameArr[0]；
var b=nameArr[1]；
突出显示（$（'主要细节内容'）、a、b）；
}
}
})
}); 
功能突出显示（元素、st、en）
{
range=document.createRange（）；
挖掘（元素，st，en，范围，0）；
s、 addRange（范围）；
var ra=s.getRangeAt（0）；
var newNode=document.createElement（“em”）；
appendChild（ra.extractContents（））；
ra.insertNode（newNode）；
s、 删除所有范围（）；
}
功能挖掘（el、开始、结束、范围、位置）
{
$（el）.contents（）.each（函数（i，e）{
if（e.nodeType==1）{
pos=pos+e.innerHTML.length；
//挖掘（e、开始、结束、范围、位置）；
}
其他的
{
如果（位置<开始）{
如果（位置+e.长度>=开始）{
范围设置开始（e，开始-位置）；
}
}
如果（位置<结束）
{
如果（位置+e.长度>=结束）
{
范围设置结束（e，结束位置）；
返回false；
}
}            
pos=pos+e.长度；
}
});
}

我给您的建议是，将您发布的代码量减少到再现问题所需的最小值（另外，80%的时间我自己找到解决方案）。如果可能的话，使用stack overflow提供的可执行代码段函数，这样我们就可以立即看到发生了什么。dig（）函数用于计算范围，highlight函数用于在匹配的单词上插入em标记。我只能告诉你这些。谢谢你的帮助。