我该如何在jQuery中编写HTML代码？

Question

我在我的WordPress网站上有一个搜索栏，并使用jQuery替换了“搜索”单词，想要使用Font Awesome的图标。但是它只显示Font Awesome代码，而不是图标。

我该如何用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>

- 5kud

---

如果你想使用jQuery更改元素的所有HTML内容，只需使用这个方法.html()确保首先使用jQuery选择元素：$(elem).html(...) - Hp93

@Hp93在他们上面的评论中几乎是正确的，但是input元素没有HTML内容。这只适用于button。 - iCollect.it Ltd

Answer 1

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

注意：将FA类直接应用于input元素的副作用是不起作用。图标只能在内联元素上可见，例如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/

使用原始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/

JSFiddle是一个在线的代码编辑器和调试工具，可以帮助开发人员测试和共享他们的HTML、CSS和JavaScript代码片段。以上链接是一个JSFiddle示例，其中包含了一些JavaScript代码。

- Gone Coding

---

我没有给你的答案投反对票，但是当我使用你的代码时，“搜索”提交按钮上的文本不再被替换为任何内容，单词“搜索”重新出现了。我最初在问题中发布的代码替换了它，但只显示了图标代码-<i class ='fa fa-eye'> </ i>，而没有显示图标。 - 5kud

@5kud：请展示代码和HTML的其余部分。我将提供一个快速演示，以展示这将与您的HTML做出的假设一起工作 :) 已添加JSFiddle：http://jsfiddle.net/TrueBlueAussie/JfGVE/907/ - iCollect.it Ltd

该页面的完整代码现在已经包含在问题中，谢谢。 - 5kud

@5kud：你的HTML代码已经可以正常运行（包括按钮类型的更正）。http://jsfiddle.net/TrueBlueAussie/JfGVE/909/ - iCollect.it Ltd

@5kud：如果您在网站源代码中找不到它，您可以随时使用jQuery更改/添加按钮。我已更新答案以说明这一点。 - iCollect.it Ltd

Answer 2

我猜您需要的是更改元素的样式。例如：

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

- liusy182

---

或者使用jQuery版本，$("#searchsubmit").addClass("fa fa-eye")。 - Draco18s no longer trusts SE

我认为你对 i 元素的评论是完全错误的。只需要尝试一下就可以了。 - Hp93

谁知道 #searchsubmit 是否真的是<i>! :) - liusy182

@liusy182：问题中的“提交”按钮文本已经暴露了答案 :P - iCollect.it Ltd

Font Awesome需要一个I元素才能工作，恐怕这不会起作用。 - 5kud

Answer 3

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

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

然而，如果您在DOM加载时没有事件侦听器，那么您应该将代码包装在自执行函数中，并将其放置在HTML末尾。

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

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

- Arman Ozak

---

我该如何用一个 Font Awesome 图标来替换提交按钮的文本？ - iCollect.it Ltd

抱歉，正在修复。 - Arman Ozak

你的IIFE（“自执行函数”）并没有任何区别（除了使elem成为局部变量）。也许你的意思是“将其放在DOM就绪处理程序中”？如果是这样，那么在HTML中的位置并不重要。 - iCollect.it Ltd

显然我在这里使用立即执行函数的意图不明确。我已经更新了答案。 - Arman Ozak

我担心现在这样说更加没有意义了，因为它与“但是，如果您没有在DOM加载时添加事件侦听器，则应该将代码包装在自执行函数中并将其放置在HTML的末尾”相矛盾。此外，如果您想要“优化您的脚本”，只需完全删除中间变量（或使用一行jQuery，这至少会缩短50%）。 - iCollect.it Ltd

它根本不与该句话矛盾！然而，删除变量可能是更好的优化，尤其是考虑到它将不会再次使用。你说得对。 - Arman Ozak