JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script>var src = 'http://placekitten.com/55/45';</script>
<ol>
<li id="imgContainer1"></li>
<li id="imgContainer2"></li>
<li id="imgContainer3"></li>
<li><script>// 1. native JS, dirty. NOT Recommended.
    document.write('<img src="' + src + '">');</script></li>
</ol>

<script>
// 2. native JS, uses the DOM - recommended.
var i = document.createElement('img'); i.src = src; document.getElementById('imgContainer1').appendChild(i);

// 3. native JS, innerHTML. Less recommended than DOM.
var imgMarkup = '<img src="' + src + '">';
document.getElementById('imgContainer2').innerHTML = imgMarkup;

// 4. MooTools DOM manipulation
new Element('img[src='+src+']').inject($('imgContainer3'));
</script>