Question

我正在努力将纯JS文本高亮显示脚本转换为jQuery，但我正在试图找出与insertNode等价的jQuery：

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

我想我可以使用以下内容：

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

结果是：

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

Answer 1

我认为jQuery不能对选择进行操作，你必须使用常规的JS方法。您收到错误是因为span是jQuery对象，而不是节点。

此外，selection.extractContents()将返回DocumentFragment，而不是字符串。所以试试这个：

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

Answer 2

使用prepend（）或append（）或insertAfter（）或insertAt（）

$（选择）.append（）;

Answer 3

您想要插入元素，而不是jQuery对象：

selection.insertNode(span[0]);

jQuery相当于insertNode？

3 个答案: