Javascript 如何在div中的选定文本下添加div？

我有一个包含几行文本的div。在文本选择中，我想在所选文本的正下方插入一个包含输入标记的div。我可以在文本下方插入输入标记，但每次选择文本添加字段时，都会有一个空白，即输入字段的大小

问题：如何解决此问题（删除所选文本前的空白）

函数createInput（）{
var _tripleClickTimer=0；
var _mouseDown=false；
document.onmousedown=函数（）{
_mouseDown=true；
选举（）；
};
document.onmouseup=函数（）{
_mouseDown=false；
};
document.ondblclick=函数双击（evt）{
选举（）；
clearTimeout（_tripleClickTimer）；
//处理三次单击选择整个段落
document.onclick=函数（）{
选举（）；
};
_tripleClickTimer=window.setTimeout（RemoveDocumentClick，1000）；
};
函数RemoveDocumentClick（）{
如果（！\u鼠标向下）{
document.onclick=null；
返回true；
}
_tripleClickTimer=window.setTimeout（RemoveDocumentClick，1000）；
返回false；
}
函数{
if（window.getSelection）
getSelection（）.removeAllRanges（）；
else if（文档选择）
document.selection.empty（）；
}
if（window.getSelection（）.toString（））{
var selection=window.getSelection（）.getRangeAt（0）；
var selectedText=selection.extractContents（）；
var div=document.createElement（“div”）；
var span=document.createElement（“span”）；
var inputObject=document.createElement（“输入”）；
inputObject.className=“objId”；
div.className=“注释”；
div.appendChild（inputObject）
div.appendChild（selectedText）；
selection.insertNode（div）；
}否则{
//getSelection（）.removeAllRanges（）；
//console.log（“空选择”）
}
}

#说明{
线高：4em；
高度：113px；
宽度：90%；
位置：绝对位置；
顶部：150px；
线高：4em；
填充底部：43px；
填充顶部：0px；
}
objId先生{
宽度：85px；
显示：内联；
位置：绝对位置；
变换：平移（0,4em）；
}
.注释{
背景颜色：黄色；
显示：内联；
}
.说明框{
填充：10px 10px；
边框：3px实心#4f534f；
保证金：0；
背景色：#bab9b9；
大纲：无；
位置：相对位置；
左：50%；
顶部：-90px；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
字体大小：1.2米；
溢出：自动；
高度：40px；
-moz边界半径：8px；
-webkit边界半径：8px；
边界半径：8px；
}

Nunc tincidunt leo eget LIBER PRATE。这是一种生活方式。弗林吉利亚，利器同侧痣，丘脑直径的turpis，以及猫和猫之间的rutrum dui vel justo。Mauris felis nisl，pretium ullamcorper nisl at，发酵液
鼠粪。不要平坐在一个拱形的位置上。

添加

位置：绝对

到

.objId

类–这样，它就不会在其他相对定位的元素中占用空间

---

由于您在ems中设置了线高度，因此在垂直定位元素时，我将保持相同的单位–a

边距顶部：4em不带
转换
将输入放在突出显示的开始下方。
您在选择后尝试过使用负边距吗？您能举个例子说明我是如何做到的吗？负边距不会减少黄色空白的大小。谢谢您的帮助！。关于如何获取文本下方的输入字段，有什么建议吗？我将转换更改为transform:translate（-11%，243%）；但对于最左侧的选择，输入字段不会显示在文本选择的底部。不幸的是，对于第2行和第3行中最左侧的文本选择，输入字段不会插入到所选文本的正下方。它位于第2行上方的右上方。尝试使用边距顶部，但不起作用。
translate（0，4em）
在我看来不错，除了右边缘，它会改变容器的宽度。或者，
.annotations
可以获得一个
位置：相对，并将
.objId
放置在
顶部：2米处。但是，由于您已经在使用JavaScript，因此可以使用该JavaScript进行定位。：）我在上面的代码中进行了您建议的编辑。因此，当我在行的开头选择任何单词或短语时，输入字段不会显示在所选内容的下方，而是会上升到右侧行的上方。示例：尝试在第三行选择单词：pulvinar。请查看我为我的项目实际使用的父div添加css时的最新编辑。选择第2行中最左边的单词时，字段向上移动。