Javascript 添加具有光标位置的动态元素

由于onclick事件，我在“Link”、“FistName”、“LastName”按钮上生成了动态span元素。问题是我想根据光标位置创建这些跨距。我在Internet上找到了一个脚本，并在我的函数editTag（）中对其进行了修改，但没有成功。我是不是错过了剧本中的一些东西

编辑：我刚刚发现了一个类似的问题，试图修改我的代码，但我仍然遇到了问题，无法根据光标位置添加跨度！：/

var area=document.getElementById（“模板”）；
var message=document.getElementById（“消息”）；
var maxLength=160；
var re=新的RegExp（“||–|||||||||||||||；
var myTags=新对象（）；
var cursorPosition=0；
var-smsNode=null；
myTags['company']='Enterprise'；
myTags['city']='VILLE'；
myTags['link']='LIEN'；
myTags['firstname']='PRENOM'；
myTags['lastname']='NOM'；
myTags['title']='TITRE'；
$（“#smsArea”）.on（'keyup mouseup'，函数（e）
{	
//console.log（window.getSelection（）.anchorOffset）；
/*if（this.hasChildNodes（））
{
var node=this.childNodes；
console.log（节点）；
}*/
/*smsNode=this.textContent；
控制台日志（smsNode）*/
/*if（$（window.getSelection（）.anchorNode）.is（$（this）））
{
光标位置=0；
}
其他的
{*/
cursorPosition=window.getSelection（）.getRangeAt（0）；
var smsNode=光标位置；
控制台日志（光标位置）；
//}
});
函数insertAfter（referenceNode，newNode）
{
referenceNode.parentNode.insertBefore（newNode，referenceNode.nextSibling）；
}
功能编辑标签（区域ID、标签、按钮）
{
var btnSms=document.getElementById（button.id）；
var zoneDiv=document.getElementById（zoneId+'Area'）；
var myButton=document.getElementById（zoneId+tag.ucfirst（））；
var myLabel=document.createElement（'span'）；
var labels=zoneDiv.getElementsByTagName（'span'）；
var spanSize=labels.length；
var-delflag=0；
var-delIndex=0；
var textNode=document.createTextNode（'\u00A0'）；
//var spanSpace=“”；
/*如果（btnSms）
{
btnSms.classList.toggle（“btn危险”）；
}
其他的
{
btnSms.classList.toggle（“btn成功”）；
}*/
如果（spanSize！=0）
{
对于（myLabId=0；myLabId

#smsArea{
-moz外观：textfield多行；
-webkit外观：textarea；
高度：150像素；
溢出：自动；
填充物：5px；
调整大小：两者；
宽度：100%；
}
.smstext{
/*边缘顶部：100px*/
左边距：60像素；
右边距：20px；
填充顶部：30px；
字体系列：verdana，无衬线；
}
#邮区{
-moz外观：textfield多行；
-webkit外观：textarea；
高度：200px；
溢出：自动；
填充物：5px；
调整大小：两者；
宽度：500px；
字体大小：12px；
边缘顶部：5px；
}
.mailInput{
-moz外观：textfield多行；
-webkit外观：textarea；
溢出：自动；
填充物：5px；
调整大小：两者；
字体大小：12px；
边缘顶部：5px；
宽度：300px；
高度：85px；
左边距：100px；
利润上限：-20px；
}
.mailtext{
/*边缘顶部：100px*/
左边距：60像素；
右边距：20px；
填充顶部：30px；
字体系列：verdana，无衬线；
}
#网络标签{
页边顶部：-392px；
左边距：555px；
宽度：569px；
}
#结果{
显示：无；
}
#相互作用{
边缘顶部：30px；
可见性：隐藏；
}
#cd弹出窗口{
背景色：rgba（94,110,141,0.9）；
不透明度：1；
-webkit转换：不透明度0.3s 0s，可见性0.3s；
-moz转换：不透明度0.3s 0s，可见性0.3s；
过渡：不透明度0.3s 0s，可见性0.3s 0s；
位置：相对位置；
宽度：100%；
最大宽度：800px；
高度：350px；
保证金：4em自动；
边界半径：25em.25em.4em.4em；
文本对齐：居中；
盒影：0.20px rgba（0,0,0,0.2）；
-webkit转换：translateY（-40px）；
-moz变换：translateY（-40px）；
-ms变换：translateY（-40px）；
-o变换：translateY（-40px）；
转换：translateY（-40px）；
/*WebKit中的强制硬件加速*/
-webkit背面可见性：隐藏；
-webkit转换属性：-webkit转换；
-moz变换特性：-moz变换；
过渡性质：变换；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
过渡时间：0.3s；
z指数：1；
}
#cd-popup.is-visible{
不透明度：1；
能见度：可见；
-webkit转换：不透明度0.3s 0s，可见性0.0s；
-moz转换：不透明度0.3s 0s，可见性0s 0s；
过渡：不透明度0.3s 0s，可见性0s 0s；
}
#cd弹出窗口{
填充物：3em 1em；
左边距：-250px；
高度：100px；
}
#cd弹出分区{
浮动：左；
宽度：30%；
列表样式：无；