如何在 jquery 中编写 html 代码？

Question

我的 wordpress 网站上显示了一个搜索栏，并使用 jquery 替换了 "search" 单词，并想使用来自 font awesome 的图标。但是它只显示字体真棒代码，而不是图标。

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

我似乎无法编辑 "value"，因为它在边栏中。这是我目前所拥有的...

<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

我想您需要的是更改 element 的样式。例如

document.getElementById("searchsubmit").className = "fa fa-eye"

Answer 2

提交按钮必须是 <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/

Answer 3

如果提交按钮是 <button> 而不是 <input> 那么您可以使用以下代码：

var elem = document.getElementById("searchsubmit");
elem.innerHTML = "<i class='fa fa-eye'></i>";

但是，如果您在 DOM 加载时没有事件侦听器，那么您应该将代码包装在 self-executing 函数中并将其放在 [=24] 的末尾=].

<script type="text/javascript">
(function(){
    var elem = document.getElementById("searchsubmit");
    elem.innerHTML = "<i class='fa fa-eye'></i>";
})();
</script>

更新： 这样，您将限制名为 elem 的变量的范围并正确优化您的脚本。

如何在 jquery 中编写 html 代码？

How do I write html code inside jquery?

jquery

wordpress

search

font-awesome

sidebar