Image pops on with inner HTML; I want it to fade in

[StevenHu]

When an input button is clicked, then an innerHTML is written to a span element, which shows a photo, and the text moves down to accommodate it. However, I'd like the photo to fade in with the innerHTML. Do I do this with Javascript or CSS transitions? I don't know how to adapt either to this script. I am using innerHTML on a external JS page so it loads quickly without photos, showing only the photos wanted -- this is for a mobile app. (Note that I don't want to include the entire bulk of Jquery just to do this effect.)

HTML:

<div>
<a href="#26" onclick="num26()"><input type="button" value="photo" class="buttonIfmar"></a>
<span id="num26"></span>
<p>text is here</p>
</div>

external JS:

function num26() {
document.getElementById('num26').innerHTML = '<a href="#num26" onclick="displayNone()" alt=""><input type="button" value="close" class="closeButton"></a>'
+ '<img src="photo.jpg" width="350px" style="clear:both;"><br>';
}

function displayNone() {
document.getElementById('num26').innerHTML = ''; 
}