Best way to Programatically write HTML : <p>What would be the best way to go about programatically writing many lines of HTML in the following format:</p>

<pre><code>&lt;div class="grid-item"&gt; &lt;img src="gifs/image-GLITCH.gif" alt="image-GLITCH"/&gt; &lt;/div&gt;
&lt;div class="grid-item"&gt; &lt;img src="gifs/image.gif" 
alt="image"/&gt; &lt;/div&gt;
&lt;div class="grid-item"&gt; &lt;img src="gifs/image-GLITCH.gif" 
alt="image-GLITCH"/&gt; &lt;/div&gt;
</code></pre>

<p>The end result is a grid of gifs where the center column contains a normal image, while the left and right columns contain "GLITCH" versions of the image.</p>

<p>Desired end result: many many rows of the following:
<a href="https://i.stack.imgur.com/nG08z.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/nG08z.jpg</a></p>

<p>I've thought about using php like:</p>

<pre><code>$images = glob("gifs/*.gif}");
foreach($images as $image) {
echo &lt;div class="grid-item"&gt; &lt;img src=$image alt=""/&gt; &lt;/div&gt;
}
</code></pre>

<p>Please note that the above is not the exact php I would use, I don't know how to exclude search strings with glob (I believe you can't do that). But this question is meant to ask:</p>

<p>"What is the best way to programatically write html in order to create a grid of images like that contained in the attached image." [i.e this question is not about the actual code to write, but instead what method of writing code should be used: javascript? php?]</p>
