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

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

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

大陆是鼠标输入的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;
    }
}