title: How to insert created in JS Image() to HTML by using innerHMTL (without appendChild)?
body: <p>I have a preloaded array of images:</p>
  
  <pre><code>image = new Image();
  image.onload = myOnLoadFunc;
  image.src = 'images/myicon.png';
  myImages.push(image);
  </code></pre>
  
  <p>I would like display them on page.</p>
  
  <p>I am doing something like this:</p>
  
  <pre><code>for (i = 0, len = myImages.length; i &lt; len; ++i) {
      html += '&lt;li&gt;&lt;img src="'+myImages[i].src+'"&gt;&lt;/li&gt;';
  }
  // ...
  myElement.innerHTML = html;
  </code></pre>
  
  <p>And it works, except for the <strong>re-downloading images</strong> for the second time.</p>
  
  <p>I know that I can do <code>myElement.appendChild(...)</code>, but I need to know if it is possible with <code>innerHTML</code> "method".</p>
  
  <hr>
  
  <p>My problem is that if browser parses <code>'&lt;img src='+image.src+'&gt;'</code> after <code>innerHTML</code> it does not understand that it already has that <code>image</code> in memory.</p>
  
  <p>I would like to avoid <code>appendChild</code> because in case of array of images it messes with the DOM several times.</p>