JSFiddle - React, Tailwind, and code Playground

HTML

<img alt="The Planet Earth" src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg">

CSS

img {max-width: 300px;}
div {padding:30px 0;}
.red {color:#F00;}

JavaScript

var img = $("img");
var img_alt =  img.attr("alt");

var s = img[0].outerHTML;
// As pointed out by user bfavaretto, we need to html-encode it before
// injecting the <span>
s = $('<div/>').text(s).html();
s = s.replace(img_alt, '<span class=\'red\'>'+img_alt+'</span>');

img.after($('<div/>').html(s));