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.

The following JS code is code that I am currently using:

```
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 < 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 + '<br/>');
} 

```

Obviously this does not work as intended. All it does is throw a error on the line **document.body.appendChild(x + '< br/>');** saying:

> 
> 0x800a139e - JavaScript runtime error: HierarchyRequestError
> 
> 
> 

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 **var xxxxxx** name in place of the **array\_Icons[I]**.

**Update 1**

[![enter image description here](https://i.stack.imgur.com/CKeI9.png)](https://i.stack.imgur.com/CKeI9.png)

Using this code:

```
var array_Icons = [
    submitBtnIcon, addBtnIcon, clearBtnIcon, exportBtnIcon
];

for (i = 0; i < 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);
}

```