javascript 替换一个值有意想不到的结果

Question

我有一个带有 value="Go" 的输入元素，该元素的 id 是 #btnSearchBox，我正在尝试用字体图标替换“Go”。使用开发工具时，如果我手动将值“Go”替换为  ，搜索代码，并手动将 fa fa-search 添加到类中，我会得到我想要的结果。但是当我尝试用 JavaScript 实现它时，它替换了值并添加了类，但我得到的不是显示的图标，而是实际的字符串 。

这是我用来添加类和替换值的 JavaScript。

document.getElementById('btnSearchBox').value = '&#xf002';
var search = document.getElementById("btnSearchBox");
search.className += " fa fa-search";

我认为它与 & 有关，但我不确定可以做些什么。如有任何建议，我们将不胜感激!

这是来自检查器的元素的副本(没有 JavaScript)。

<input id="btnSearchBox" name="btnSearchBox" type="submit" class="SearchBox1 ThemeButton GoThemeButton SearchGoThemeButton btn btn-default" value="Go" data-key="ThemeButton_Go_Search_string" onclick="return window.btnQuickAddToCart_onclick ? btnQuickAddToCart_onclick() : false;" \="">

我实际上无法访问代码，否则只能手动添加它。这是用于搜索框的愚蠢的美国商务合并代码。

Answer 1

javascript 中的 unicode 字符格式为 \uXXXX，因此将 '' 更改为 '\uf002'

document.getElementById('btnSearchBox').value = '\uf002';
var search = document.getElementById("btnSearchBox");
search.className += " fa";

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input id="btnSearchBox" name="btnSearchBox" type="submit" class="SearchBox1 ThemeButton GoThemeButton SearchGoThemeButton btn btn-default" value="Go" data-key="ThemeButton_Go_Search_string" onclick="return window.btnQuickAddToCart_onclick ? btnQuickAddToCart_onclick() : false;" \="">