JSFiddle - React, Tailwind, and code Playground

HTML

<ol id=gbzc class=gbtc style="height: 28px;">
    <li class=gbt> <a onclick=gbar.logger.il(1,{t:119}); class=gbzt id=gb_119 href="https://plus.google.com/u/0/?tab=wX">
                    <span class=gbtb2>
                    </span>
                    <span class=gbts>
                      +SomeDudesUsername
                    </span>
                  </a>

    </li>
    <li class=gbt> <a onclick=gbar.logger.il(1,{t:1}); class="gbzt gbz0l gbp1" id=gb_1 href="https://www.google.nl/webhp?hl=en&tab=ww">
                    <span class=gbtb2>
                    </span>
                    <span class=gbts>
                      Search
                    </span>
                  </a>

    </li>
    <li class=gbt> <a onclick=gbar.qs(this);gbar.logger.il(1,{t:2}); class=gbzt id=gb_2 href="https://www.google.nl/imghp?hl=en&tab=wi">
                    <span class=gbtb2>
                    </span>
                    <span class=gbts>
                      Images
                    </span>
                  </a>

    </li>
    <li class=gbt> <a onclick=gbar.qs(this);gbar.logger.il(1,{t:8}); class=gbzt id=gb_8 href="https://maps.google.nl/maps?hl=en&tab=wl">
                    <span class=gbtb2>
                    </span>
                    <span class=gbts>
                      Maps
                    </span>
                  </a>

    </li>
    <li class=gbt> <a onclick=gbar.logger.il(1,{t:78}); class=gbzt id=gb_78 href="https://play.google.com/?hl=en&tab=w8">
                    <span class=gbtb2>
                    </span>
                    <span class=gbts>
                      Play
                    </span>
                  </a>

    </li>
    <li class=gbt> <a onclick=gbar.qs(this);gbar.logger.il(1,{t:36}); class=gbzt id=gb_36 href="https://www.youtube.com/?gl=NL&tab=w1">
                    <span class=gbtb2>
                    </span>
                    <span class=gbts>
                      YouTube
                    </span>
          ...

JavaScript

function addGroove(retrievedText) {
    var bar = document.getElementById("gbzc");
    var grooveyImage = document.createElement("img");
    var link = document.createElement("a");
    var listy = document.createElement("li");
    grooveyImage.src = "http://cdn.androidpolice.com/wp-content/uploads/2012/08/nexusae0_146.png";
    grooveyImage.style.height = "28px";

    //grooveyImage.alt doesn't display in chrome for me, but when inspecting the element the alt attribute is present and correct.
    if (retrievedText === "") {
        link.href = "http://grooveshark.com";
        grooveyImage.alt = "Grooveshark";
    } else {
        link.href = "http://grooveshark.com/#!/search?q=" + retrievedText;
        grooveyImage.alt = "Search for '" + retrievedText + "' on Grooveshark";
    }

    //Nest and display everything
    link.appendChild(grooveyImage);
    listy.appendChild(link);
    listy.id = "grvshrkbtn";
    if (!document.getElementById("grvshrkbtn")) {
        bar.appendChild(listy);
    } else {
        bar.replaceChild(listy, document.getElementById("grvshrkbtn"));
    }
}

//Initialize
$(document).ready(function () {
    addGroove(document.getElementById("gbqfq").value);
});

//Watch textfield for changes
$("#gbqfq").bind("input", function () {
    addGroove($(this).val());
});