如何将包含十六进制 unicode 字符的 innerHTML 更改为另一个与 JavaScript 类似的字符？

Question

I have a website menu that shows the down-pointing arrow next to an item that has a submenu. This arrow ( ▼ ) is contained in a span like this: <span class="h-open-icon>&#9660;</span> and I want to change it to this: <span class="h-open-icon>&#9650;</span> (this character: ▲)

In Javascript, I am attempting to use the following code (part of a larger script) - which works fine for changing plain alpha-numeric text (eg innerHTML === "text" etc) - to change it to the up-pointing arrow when the submenu is open:

let hstr = button.querySelector('.h-open-icon');
    if (hstr.innerHTML === "\&\#9660\;") {
        hstr.innerHTML = "\&\#9650\;";
    } else {
        hstr.innerHTML = "\&\#9660\;";
    }

But this is not working. I assume it must be something to do with escaping characters, but all I can find is help on how to remove them, not keep them. It's just the numbers following the # that I need to change. Thanks.

Answer 1

You could sidestep the issue by just including the symbols in the JS:

 let hstr = document.getElementById("toggle"); hstr.onclick = function(){ if (hstr.innerHTML == "▼") { hstr.innerHTML = "▲"; } else { hstr.innerHTML = "▼"; } }

 <button id=toggle>▼</button>