How can I get my insertnode to stop being highlighted?

Question

I have a Javascript function for a chrome extension I am making that shows a popup dictionary. This is done by inserting a span node under the text the user has highlighted with their mouse.

function insertPopupDict() {
    if (window.getSelection) {
        var selection = window.getSelection();
        var text = selection.toString();
        var range = selection.getRangeAt(0);

        var popupDictionaryWindow = document.createElement('span');
        popupDictionaryWindow.id = 'hawaiian-popup-dictionary'
        popupDictionaryWindow.style = 'margin-top: 35px; width: 360px;background-color: #555;color: #fff;text-align: center;border-radius: 6px;padding: 8px 0;position: absolute;z-index: 1;';
        
        searchWord(text).then(defenitions => {
            popupDictionaryWindow.innerHTML = text + "<hr><br>";
            for (var i = 0; i < defenitions.length; i++) {
                popupDictionaryWindow.innerHTML += defenitions[i] + "<br><br>"
            }
            range.insertNode(popupDictionaryWindow);
        });
        popupVisible = true;
    }
}

The popup works, but the text in the popup span gets highlighted as well.

Does anybody know how to stop this from happening? I'm new to Javascript and honestly don't fully understand how the selection range works. I want to leave the selected word highlighted, but de-select anything in the new popup span.

Answer 1

Found the solution. Still don't entirely understand why I had to do this, but the solution was to just create a new range at the same spot as the old one.

function insertPopupDict() {
    if (window.getSelection) {
        let selection = window.getSelection();
        var text = selection.toString();
        var range = selection.getRangeAt(0);

        //this is the solution to the highlight problem
        var newRange = document.createRange();
        newRange.setStart(selection.focusNode, selection.startOffset);

        var popupDictionaryWindow = document.createElement('span');
        popupDictionaryWindow.id = 'hawaiian-popup-dictionary'
        popupDictionaryWindow.style = 'margin-top: 35px; width: 360px;background-color: #555;color: #fff;text-align: center;border-radius: 6px;padding: 8px 0;position: absolute;z-index: 1;';

        searchWord(text).then(defenitions => {
            popupDictionaryWindow.innerHTML = text + "<hr><br>";
            for (var i = 0; i < defenitions.length; i++) {
                popupDictionaryWindow.innerHTML += defenitions[i] + "<br><br>"
            }
            //place node at newRange instead of range
            newRange.insertNode(popupDictionaryWindow);
        });
        popupVisible = true;
    }
}