Replace dynamic content with images and other stuff

I'm struggling on how to style in the best way possible this kind of code:

<td><div data-source="lightstreamer" data-field="yellow-cards">-</div></td>

The data-source node will be dynamically deeded with content (i.e. 1, 2..) but I have to show an image, instead (a yellow card if node content is 1 or a red card if node content is 2). I cannot modify the markup as it will be provided by a third part.

If you have any tip on how to achieve that result in a clean way, it will be greatly appreciated, as I'm not sure how to do it, right now.

Thank you so much!

Teo

Ok, the solution I found is strictly based upon LightStreamer. Given a DynaGrid:

// Create Home Players Grid
    var homePlayersGrid = new DynaGrid("homePlayersGrid",true);
    var fieldList = ["key", "command", "jersey", "lastName", "sequence","substituted","yellowCards","redCards","autoGoals","goals"]; 
    var homePlayersSubscription = new Subscription("COMMAND","homePlayers",fieldList);
    homePlayersSubscription.addListener(homePlayersGrid);
    homePlayersGrid.setSort("sequence",false,true);
    client.subscribe(homePlayersSubscription);

chained to a HTML table:

<tr id="homePlayersGrid" data-source="lightstreamer">
        <td><div data-source="lightstreamer" data-field="sequence">-</div></td>
        <td><div data-source="lightstreamer" data-field="jersey">-</div></td>
        <td><div data-source="lightstreamer" data-field="lastName">-</div></td>
        <td><div data-source="lightstreamer" data-field="substituted">-</div></td>
        <td><div data-source="lightstreamer" data-field="yellowCards">-</div></td>
        <td><div data-source="lightstreamer" data-field="redCards">-</div></td>
        <td><div data-source="lightstreamer" data-field="autoGoals">-</div></td>
        <td><div data-source="lightstreamer" data-field="goals">-</div></td>
    </tr>

I add a listener to detect any update to the contents:

homePlayersGrid.addListener({
      onVisualUpdate: function(key,info,domNode) {
        if (info == null) {return;}
        formatYellowCards(domNode,info);
      }
    });

Where formatYellowCards() is a function that sets the right kind of class to the changed data-field:

function formatYellowCards(domNode, info) { //onChangingValues
       if (info == null) {return;}
       info.setCellStyle("yellowCards","transition","yellowCards-"+info.getCellValue("yellowCards"));
    }

Finally, the CSS is trivial:

.transition {background: green;text-indent: -5000px}
.yellowCards-0 {background: white;display: none;text-indent: -5000px}
.yellowCards-1 {background: yellow;text-indent: -5000px}
.yellowCards-1 {background: red;text-indent: -5000px}