JSFiddle - React, Tailwind, and code Playground

by tjdragon

HTML

<ul>
    <li class="ui-menu-item" role="presentation">
      <a id="ui-menu-16-2" class="ui-corner-all" tabindex="-1" role="option" data-image="http://www.gettyicons.com/free-icons/101/payment-method/png/256/check_256.png">
    Cheque
      </a>
    </li>
</ul>

CSS

.hide{
display:none;
}

JavaScript

$(function(){
    $("ul li").find("a").each(function(){
        //Wrap innertext in span and hide it
        $(this).contents().wrap("<span class='hide'/>").end();
        
        //Add the image tag
        var img = $("<img/>", {src: $(this).data("image")});
        img.appendTo($(this));
    });
});