jquery - 如何在jquery中编写html代码？

Question

我的 WordPress 网站上显示了一个搜索栏，并使用 jquery 来替换“搜索”一词，并且想要使用 font Awesome 中的图标。然而，它只显示字体很棒的代码，而不是图标。

如何用很棒的字体图标替换提交按钮文本？

我似乎无法编辑“值”，因为它位于侧边栏中。这就是我到目前为止所拥有的......

<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/">
                <div>
                    <label class="screen-reader-text" for="s">Search for:</label>
                    <input type="text" value="" name="s" id="s">
                    <input type="submit" id="searchsubmit" value="Search"></input>
                </div>
            </form>


<script type="text/javascript">
    var $elem = $("#searchsubmit");
    $elem.html("<i class='fa fa-eye'></i>");
</script>

Answer 1

提交按钮必须是 <button>而不是<input type="button"因为输入不能有 HTML 内容，但是 button元素可以。

注意:input 的副作用元素样式的缺点是直接将 FA 类应用于它们不起作用。该图标仅在内联元素上可见，例如 span或i (FA 推荐)。

改为设置 HTML:

<script type="text/javascript">
    var $elem = $("#searchsubmit");
    $elem.html("<i class='fa fa-eye'></i>");
</script>

JSFiddle: http://jsfiddle.net/TrueBlueAussie/JfGVE/907/

使用 OP 自己的 HTML 进行更新(更正为 button 类型):http://jsfiddle.net/TrueBlueAussie/JfGVE/909/

例如

<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/">
  <div>
    <label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s">
    <button type="submit" id="searchsubmit" value="Search"></button>
  </div>
</form>

如果无法控制源代码，可以动态添加按钮并替换原来的。

JSFiddle: http://jsfiddle.net/TrueBlueAussie/JfGVE/911/

var $elem = $("#searchsubmit");
$elem.replaceWith('<button type="submit" id="searchsubmit" value="Search"><i class="fa fa-eye"></i></button>');

或者只是

$("#searchsubmit").replaceWith('<button type="submit" id="searchsubmit" value="Search"><i class="fa fa-eye"></i></button>');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/JfGVE/912/