Создание SPAN вокруг выделенного текста в DIV динамически

Question

У меня есть DIV в моей HTML страницу следующим образом:

<div class="well editor" id="highlighted-text" 
style="overflow: scroll; overflow-x:hidden;height:500px;" contenteditable></div> 

Когда я выбираю часть текста внутри DIV и нажмите на кнопку, я хочу для выделения выделенного текста.

Я понимаю, что это может быть сделано путем добавления пролета с селектором класса, вокруг выделенного текста, но у меня возникли проблемы создание пяди вокруг выделенного текста:

var node = window.getSelection().focusNode; 
$(node).wrapInner("<b></b>"); 

Это не работает , Ваша помощь приветствуется. Заранее спасибо.

Answer 1

Может быть, вам не нужно создавать такую ​​SPAN с помощью выбора pseduo атрибут CSS для укладки: https://css-tricks.com/overriding-the-default-text-selection-color-with-css/

Answer 2

Я получил его ... Я сделал это:

var selection= window.getSelection().getRangeAt(0); 
var selectedText = selection.extractContents(); 
var span= document.createElement("span"); 
span.style.backgroundColor = "yellow"; 
span.appendChild(selectedText); 
selection.insertNode(span);