Javascript 如何使用索引在特定单词或子字符串之后在页面加载时创建div？

我想使用javascript在所选单词或子字符串之后创建div。我有一个保存在数据库中的开始和结束索引。所以我从DB中得到这些索引，找到了创建div的确切位置，但它给出了一个错误

下面是我正在使用的代码：

var pos1;

var start1,end1, range1;

function createNoteBox(element,st,en)
{
  var div = document.createElement("div");
  var range1 = document.createRange();
    start1 = st;
    end1 = en;
    pos1 = 0;
    noteDig(element);
    // s.removeAllRanges();
    s1.addRange(range1);

  // var ra = n.getRangeAt(0);
  
  div.setAttribute('style','background-color:yellow;height:1.5rem;width:1.5rem;float:right;border:1px solid #f3a73b;position:relative; left:10%;');
  div.setAttribute('id', "" +st + en);
  div.setAttribute('class','newDiv');
  div.setAttribute('onclick','changeHeightWidthDiv("' + st + en + '")');
  div.setAttribute('onmouseleave', 'saveData("' + st  + ',' + en +'" , "'+ st + en +'") ');
   if (s1.rangeCount > 0) 
   {
       var range12 = s1.getRangeAt(0);
       range1.collapse(false);
       range1.insertNode(div);   //This line giving an error.Failed to execute 'insertNode' on 'Range': Only one element on document allowed.
   }
}

---

错误是什么？未能在“范围”上执行“insertNode”：文档上只允许一个元素。