title: Javascript array of base64 images loop and place on page
body: <p>I am trying to create a test loop of base64 images so that I can quickly see what the icon in Base64 looks like on my html page.</p>
  
  <p>The following JS code is code that I am currently using:</p>
  
  <pre><code>var submitBtnIcon    = "data:image/png;base64,iVBORw0KGANSUhEUgAAA...+d6uAAAAAElFTkSuQmCC";
  var addBtnIcon       = "data:image/png;base64,iVBORw0KGg...oAAAANSUhEU=";
  var clearBtnIcon     = "data:image/png;base64,iVBw0KGgoAAAA...MAAADXqc3KAA3NCSVQICAjb4U==";
  var exportBtnIcon    = "data:image/png;base64,iVBORw0KGgoAAAA...+48GgAAAABJRU5ErkJggg==";
  
  var array_Icons = [
      "submitBtnIcon", "addBtnIcon", "clearBtnIcon", "exportBtnIcon"
  ];
  
  for (i = 0; i &lt; array_Icons.length; i++) {
      var x = document.createElement("IMG");
  
      x.setAttribute("src", "url('" + array_Icons[i] + "')");
      x.setAttribute("style", "width: 15px; height: 15px; margin-right: 5px;");
  
      document.body.appendChild(x + '&lt;br/&gt;');
  } 
  </code></pre>
  
  <p>Obviously this does not work as intended. All it does is throw a error on the line <strong>document.body.appendChild(x + '&lt; br/>');</strong> saying:</p>
  
  <blockquote>
    <p>0x800a139e - JavaScript runtime error: HierarchyRequestError</p>
  </blockquote>
  
  <p>So I'm not sure what/where to go at this point in order to fix this issue above and have it actually use the <strong>var xxxxxx</strong> name in place of the <strong>array_Icons[I]</strong>.</p>
  
  <p><strong>Update 1</strong></p>
  
  <p><a href="https://i.stack.imgur.com/CKeI9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CKeI9.png" alt="enter image description here"></a></p>
  
  <p>Using this code:</p>
  
  <pre><code>var array_Icons = [
      submitBtnIcon, addBtnIcon, clearBtnIcon, exportBtnIcon
  ];
  
  for (i = 0; i &lt; array_Icons.length; i++) {
      var x = document.createElement("IMG");
      var br = document.createElement("br");
  
      x.setAttribute("src", "url('" + array_Icons[i] + "')");
      x.setAttribute("style", "width: 15px; height: 15px; margin-right: 5px;");
  
      document.body.appendChild(x);
      document.body.appendChild(br);
  }
  </code></pre>