jQuery odpowiednik metody insertNode? - javascript, jquery

Pracuję nad konwersją skryptu podświetlania czystego tekstu JS na jQuery, ale próbuję dowiedzieć się, co odpowiada jQuery insertNode jest:

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);

Pomyślałem, że mogę użyć następujących rzeczy:

var span = $("<span class="highlight">" + selectedText + "</span>");
selection.insertNode(span);

Co skutkuje w:

NOT_FOUND_ERR: DOM Exception 8: An attempt was made to reference a Node in a context where it does not exist.

Odpowiedzi:

Nie sądzę, że jQuery może działać na zaznaczeniach, będziesz musiał użyć zwykłych metod JS. Otrzymujesz błąd, ponieważ Twój span jest obiektem jQuery, a nie węzłem.

Również, selection.extractContents() zwróci DocumentFragment, a nie ciąg znaków. Spróbuj tego:

var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = $("<span class="highlight">" + selectedText.textContent + "</span>");
selection.insertNode(span[0]); // pass the first node in the jQuery object

Użyj prepend () lub append () lub insertAfter () lub insertAt ()

$ (wybór) .append ();

Chcesz wstawić element, a nie obiekt jQuery:

selection.insertNode(span[0]);