在光标位置添加跨度到页面

Question

我有以下 JavaScript，我试图在光标位置在 div 中的任何位置插入跨度。

var appendPlaceHolder = function (field) {
        var e = document.getElementById("t");
        e.innerHTML += (' <span class="nonEditable tags">{' + field + '} <span onclick=removePlaceholder(this) class="testing"></span>x</span> ');
    }

<div id="t" contenteditable="true">
  Hello
</div>

我该怎么做？

Answer 1

这是我写的一个旧脚本。希望它有所帮助。

continent是鼠标进入的div，tooltipOutput

function continentTooltip(continent, tooltipOutput) {
    var tooltip = $('.map__tooltip');

    $(continent).mouseenter(function() {

       $(document).off('mousemove').bind('mousemove', function(e){

          var positionX = (e.pageX + 20) + 'px';
          var positionY = e.pageY + 'px';

          $('.map__tooltip').css(      
             "transform" , 'translate(' + positionX + ', ' + positionY + ')'
          );
       });

       tooltip.addClass('map__tooltip--show');
       tooltip.text(tooltipOutput)
    })

    $(continent).mouseleave(function() {
        tooltip.removeClass('map__tooltip--show');         
    });
  }
  //call script
  continentTooltip(africa, 'Vacations in Africa');

HTML：

<div class="map__tooltip"></div>

CSS：

.map__tooltip {
     display: none;
     background-color: #FFF;
     border-radius: $radius;
     padding: 4px;
     position: absolute;
     top: 0;
     left: 0;
}

.map__tooltip--show {
    display: block;
}

@media screen and (max-width: 1300px) {

    .map__tooltip--show {
        display: none;
    }
}