JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Desired</h1>

<ul id="listaEmoticones">
    <li>
        <img src="IMAGEURL" /> <span>text</span>

    </li>
    <li>
        <img src="IMAGEURL2" /> <span>text2</span>

    </li>
</ul>

<h1> Sample Result </h1>

<div id="Chat_15028"></div>

JavaScript

var $chat = $('#Chat_15028');
        $lista = $('<ul>').attr('id', 'listaEmoticonesB')
         $chat.prepend($lista);

        var data = "* http://images2.wikia.nocookie.net/__cb20110904035827/central/images/7/79/Emoticon_angry.png\n** (angry)\n** >:O\n** >:-O\n* http://images1.wikia.nocookie.net/__cb20110904035827/central/images/a/a3/Emoticon_argh.png\n** (argh)";

        var lines = data.split("\n");
        var src, txt, $opt, $img;
        for (var i = 0; i < lines.length; i++) {
            if (lines[i].indexOf('* ') == 0) {
                src = lines[i].substring(2);
            } else {
                $img = $('<img />').attr('src', src);
                $opt = $('<li />').append($img).append("<span>" + lines[i].substring(3) + "</span>");

                $lista.append($opt);
            }
        }