如何在 jquery 中编写 html 代码?
How do I write html code inside jquery?
我的 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>
我想您需要的是更改 element
的样式。例如
document.getElementById("searchsubmit").className = "fa fa-eye"
提交按钮必须是 <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>');
如果提交按钮是 <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
的变量的范围并正确优化您的脚本。
我的 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>
我想您需要的是更改 element
的样式。例如
document.getElementById("searchsubmit").className = "fa fa-eye"
提交按钮必须是 <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>');
如果提交按钮是 <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
的变量的范围并正确优化您的脚本。