How do I write html code inside jquery?

Question

I have a search bar showing on my wordpress site and have used jquery to replace the "search" word and want to use an icon from font awesome. However it just displays the font awesome code, not the icon.

How do I go about replacing the submit button text with a font awesome icon?

I cant seem to edit the "value" as this is in a sidebar. This is what I have so far...

<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

The submit button has to be a <button> and not an <input type="button"as inputs can't have HTML content, but button elements can.

Note: A side effect of input element styling is that applying FA classes directly to them does not work. The icon is only visible on inline elements such as a span or i (which FA recommend).

Set the HTML instead:

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

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

Update with the OPs own HTML (corrected to have button type): http://jsfiddle.net/TrueBlueAussie/JfGVE/909/

e.g.

<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>

If you cannot control the source code, you can add the button dynamically instead and replace the original.

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>');

or just

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

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