Javascript base64 图像数组循环并放置在页面上
Javascript array of base64 images loop and place on page
我正在尝试创建一个 base64 图像的测试循环,以便我可以在我的 html 页面上快速查看 Base64 中的图标。
以下JS代码是我目前正在使用的代码:
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/>');
}
显然这不能按预期工作。它所做的只是在行 document.body.appendChild(x + '< br/>'); 上抛出一个错误 saying:
0x800a139e - JavaScript runtime error: HierarchyRequestError
所以我不确定 what/where 在这一点上解决上面的问题并让它实际使用 var xxxxxx 名称代替array_Icons[我].
更新 1
使用此代码:
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);
}
appendChild
需要 DOM 节点参数。您正在传递 string
。要查看您做错了什么,请检查 x + '< br/>
的输出是什么。
首先,你的array_icons
没有指向变量,它只包含4个字符串:submitBtnIcon
....等。如果您想将创建的变量存储在数组中,请不要使用引号:
var array_Icons = [
submitBtnIcon, addBtnIcon, clearBtnIcon, exportBtnIcon
];
其次,您不能使用 appendChild() 方法附加元素 + 字符串,因此您需要制作两个元素:一个用于图像,第二个用于 <br>
appendChild
接受 Element
-- 而不是 string
。现在,您正在尝试将字符串 "<br>"
添加到类型 Element
的 x
。
要解决您的问题,您可以明确创建一个 br
元素,并在附加图像后将其附加到 DOM。
此外,您需要删除 array_Icons
中项目周围的引号,因为这是一个变量名称字符串数组。你想要的是一个变量名数组,指向你已经定义的字符串:
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");
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);
}
发生这种情况是因为
- 您正在尝试这样做
x + '<br/>'
即向字符串附加一个 DOM 元素
- array_Icons 有一个名为变量的字符串数组,即
"submitBtnIcon"
而您必须将变量名称放入:[submitBtnIcon]
.
- 你不需要在
<img>
标签中使用url
,只需将src
设置为base64值即可。
var submitBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD6UlEQVRIS6WU22tcVRTGv7XO3GeaTNOmBW2rIvoghZIH8fJS4pMI2kwKYyWKRaIPCvk/BF99sQglFiGDVSsGxFvAgE8JAUEL0tKYi9RMMk1yJnPOzJm9lqyTSXpJHMXsl8M5e5/1W9+31tqELkunkIjciffQc/oVaHCG0e4ThShSf4rTn8n/5XLmxdo33WLQP23qj73lVuaZCbSr8LbmQAyAAXVQFZBSGq7nOVDb/y0tv5+lQX91v1j7AvTb3GiYe/4S1r6H50EoAabOSTUFClYHUQfWRBGae7KZxfUT+0H2APQHPBxgYEnX59RLQMkDEUO1c5IUpApVB1KJn9BEDyPZdz3/0vxTD6rYA3BfZz4OtfCWRquWPYjMczCbRQrA3k2BKRGwCqBtiOYf50L75jk6h6/uhewBtCaP1ML62mFObHtuACbwjgIAQg8CzC5KcTaV/jI55Je6AoLPUxq1WmaNWmGJrKBQtuxtEUgEGluFjkUAOQfKpTM30ufDJ7oCGhVoZAHIYgPqQdgyNou2V6wgblcFxxSBOAFnPfyavYDT3QET+KvlcMyimy0MiDJ4VwEgQnHgGCBWZEDgwNk0rmRfxRvdazCBj/wm3ibLfBtCbF3TUUBxmaGiILLvptLscqC+QzhL5/FTV4Bew/HaHdwmr6PAMr1HgVi2HQWyY5HCCjLVdxEv/Gub2oH2Zxi64+OLWAHHBVbzarfMpsBqpLES21k6msOjVIb7TwA7pFfx7KqP70hQiO2520ViDUwCiRUAc0cP4en9gm83XbfLroJUtU5Nikdtp4cQA4S2W/XYaPcYXQEWcv1ystWMouSOgLhNDSfQpIdG3ygK/+s23fmpdgkatq0Ud02y28EgGQ+bh99B74EAq1ce+bC19se7NlBmBgHCAIfJLJB/6MKpN29OHAiwsVF7bf5241PdWoYLagibkWy5PG+2UkhEa6eGhoYWDwSo14PXb9268UnbiURthzAIKAwDDYMGO+ceK5VK8wcC+L4/vLi4eFVEEEURwjCUKIrY9300m83jw8PDKwcC2M+Tk5Pl5eXliWw2i42NDZ2dnaWBgYGTY2NjS92C7zsHlUrF6+/vT1ar1XQul+P19fX85ubm1vT09NTMzMyZhYUFDA4OflAqld7P5/OZYrG41Wg0pL+/v1mtVqNyuXzfNO/Owfj4+EVmfhnASRHpY2brb09EcsxMqVSqubKyUshkMu1isdgKgiBFRDZ0DRFxRFQnopqILHqed21kZGT8PgWVSqUQRdERESk653o9z8sRUUFV1Z4A8mS3T3x7Kjnntpi53nkPPM+ri8gGM68nk8m1crkc7/0NhPIRN5eg+/QAAAAASUVORK5CYII=";
var addBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACUElEQVQ4T6WTTWgTURDH/+/tbnaz2bRJg4VQDdhiLI0f1NKKpdCreBCpIIgIQqEHbQ/1pAchF6UKxYPgQa+e4sVWMKgFEclBRHrwo4eKERGCH/1INt1NsrtvJNlUW4tQ6IN3mpnfzPxnhmGHj+0wHtsGZNKpgGlF1IqukGY5bPRWzqwn/wPITO7ukEgSGyuyrDUMDnUrnUePPQSCAyDyzYwBzFxgyds9DYD7IPW66IYHaN2hSRG1CvRUPwT3ICrFDfkIRiQG+cj9Ogr4OtVmF82KtjG7cF20dO1D7PAA3NJ3gEmb5AppHOrQjA/4PN1eVvYcDFGzI0ECerQdeiyM2q9FyCEZngOQ22QwQjgqQ+l76gPo3TlaXVr+68EYRM2C8FxIioy3N0x0nWhFtN+FVwUkFsD81AqcEh9uAOwXfWRam/QDA4Mc5Hhzp4T8TAGGomLoZjdaez3kRn9gqbAEMjS/5rW5A1sADbE54NoesmM/EfAAlSkw4mGsFpZRqRF4CGd9wLNOMu3miP7ZLCYDwiU8Hy/BM+tzJzg1YPhaCMmr33wNStk4mfbmFtY5nBOUQBBPJgXKhRLAJYgqcHI6jsTFDz6g/DhAZoVv2eqGlRnIjAdgrRTBhYAeJtiWBMfjSPb2nGeZ2dm9kbVX1yN4f0qQJAOo/3o/XNYkzN9dQH4uDwkODl0+jsSgXs1eeKmSUwaXFbB0Oq0lEvt3GUZrWAmqBheeIjg0wZgmQ4LrWfh05vSVtpGRRx1jl3LkOK65+JF9mZi4Ry0tk9s+pv9d7W97deRNAWjIZwAAAABJRU5ErkJggg==";
var clearBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACz0lEQVQ4T6WTX0hTcRTHz+/+7rybd3fTNXUhNv9npVE9mIGRlnvIh/6AZkQovRglLREzyYcm1YNSGRJEiA8ZA9GHNNAigkSlCJEK08QUNsvU1Jm7NnfZb/fEhCQTe+n3eH7n+zlfDt9D4D8f2UyPk7uPgcyKIEy9T1JG32zWtwHQ3Wgy5Ns9XnzBvw0EWKbGKADJVjYdtO6jzbErrHD/NyUA4oTinw+n6N+qi6AnyOFgZ8iBIyeHd/T0sD/drANg97byuenJBo4HoBwAFQC05tgepjVfHa2A3PAVkpX24f3JxuRkwT4+roRA6wBLjySXIstWbaiqBZj5HAUTXdGQc3MM+h0Js7Z3Y5aQ6KXVWibFxDhkn+/IGmCk3rjPjEuDr2LLoTvqBuTRFhBKqsGzwIE+IgZYwAMJGemV84w9Eb3euwsu1/EfHLd3DdDU9bjeNnr+SotYAwOGQuBEA5TUJcDcBA8BPwFCOEDGIDIy8mJwZYVpEatOLSykrAJyHG16GmuVCS+CyCmwHBTg+uJpSMePENADNNklEAQCYYCLl2XZtGGJZ9qHrrncrls8zwOlGqCUgj4iesRGunbGdtweGmz3ZlCBgCAIQXNqasrw7Kz/nts9vbbEQ43PZ5e9XrMgGYcJC2RQjeDstdvO5rW5aqTh3qb02uIkQ3h4hR+xQKPTgUmne1Y6NZW/CsisbDiwpDW9NujFooHqgrY91Q/iJWtaVt+F3Na/01cKoEkTRTtjrKNKUSZWAclHLwma7Nza1Ljo3s7i7O7ttc7cuEjDw6TEpOav7qmnXWW2T/86lw0RTXO03pF/LldwHIUvdec2jfBvKGlubpYsli3xQUU1IaLR5/MFvyuQ7AmqOzIiNP1hOj0falZVlXAc50XEACFkiVLqYYy5iNPpTETEg4QQCyJKACBxACohKKnAaUJiRFRDIkQMOZIJITIizhBC+n4Bqj0YeIFAVHoAAAAASUVORK5CYII=";
var exportBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB60lEQVQ4T43Sz2vTYBgH8O+TpkzMsrQq7lhF1AkNIYIljIk/L64H0c1RmXjZQS+KP0DQf8CLKIhQqMKoF0WG9OBB9KAoHiZd2SHSg22hlEKdUkswNanN+8oGHTYIyXt+3g/P+/2+hBCn0WhMu657izEWJyIuiuKKZVlXNU2zKeh+u91Ot1qtVwB+yLL8zvO8UcuyTimKspZIJMYDgXq9/rHT6UxpmrY5W6lUbtq2fa/ZbJ4IBMrl8hfP84RkMnlgsG02m00ZhrFcrVZnA4FisWgyxqKpVGr/AMjlcpOqqn6q1WpzgcD7D8smY1w8ftSYGAD5fH67qqqPTNO8swH030bStivFwT0+GPIACCT2vtKl+wCJe3jueqT7840yh/a/wdPSbUzMTI+XPacLwL8QB3EHAAenUURi/SU69OvcEJC/AX3+GErun6BCga1jKNBJnBkCnlyBfuEISm4/GBiTUaC0H7gMPXM4HBCXUBBmfUB2AXpmEiUnxBN2yChE533Aw4vQzxvhN5AWfMCDsziYmcJKmBBjI3gZu4aZoRBfPH28e++3u6sEJq1X/58uN+YF9NCUT7+2d6afRyNel4jWHMdZpcXFZ7soumUfJ2EbJ64QSOIMIyTwzU+1DnBGJKL3m7jTJ6IOEX0H8Pkv/NK/JJJbTNcAAAAASUVORK5CYII=";
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", array_Icons[i] );
x.setAttribute("style", "width: 15px; height: 15px; margin-right: 5px;");
document.body.appendChild(x);
document.body.appendChild(br);
}
console.log(document.body.innerHTML)
其实可以查看生成的html(也就是document.body.innerHTML
):
<img src="url('submitBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('addBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('clearBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('exportBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br>
我正在尝试创建一个 base64 图像的测试循环,以便我可以在我的 html 页面上快速查看 Base64 中的图标。
以下JS代码是我目前正在使用的代码:
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/>');
}
显然这不能按预期工作。它所做的只是在行 document.body.appendChild(x + '< br/>'); 上抛出一个错误 saying:
0x800a139e - JavaScript runtime error: HierarchyRequestError
所以我不确定 what/where 在这一点上解决上面的问题并让它实际使用 var xxxxxx 名称代替array_Icons[我].
更新 1
使用此代码:
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);
}
appendChild
需要 DOM 节点参数。您正在传递 string
。要查看您做错了什么,请检查 x + '< br/>
的输出是什么。
首先,你的array_icons
没有指向变量,它只包含4个字符串:submitBtnIcon
....等。如果您想将创建的变量存储在数组中,请不要使用引号:
var array_Icons = [
submitBtnIcon, addBtnIcon, clearBtnIcon, exportBtnIcon
];
其次,您不能使用 appendChild() 方法附加元素 + 字符串,因此您需要制作两个元素:一个用于图像,第二个用于 <br>
appendChild
接受 Element
-- 而不是 string
。现在,您正在尝试将字符串 "<br>"
添加到类型 Element
的 x
。
要解决您的问题,您可以明确创建一个 br
元素,并在附加图像后将其附加到 DOM。
此外,您需要删除 array_Icons
中项目周围的引号,因为这是一个变量名称字符串数组。你想要的是一个变量名数组,指向你已经定义的字符串:
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");
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);
}
发生这种情况是因为
- 您正在尝试这样做
x + '<br/>'
即向字符串附加一个 DOM 元素 - array_Icons 有一个名为变量的字符串数组,即
"submitBtnIcon"
而您必须将变量名称放入:[submitBtnIcon]
. - 你不需要在
<img>
标签中使用url
,只需将src
设置为base64值即可。
var submitBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD6UlEQVRIS6WU22tcVRTGv7XO3GeaTNOmBW2rIvoghZIH8fJS4pMI2kwKYyWKRaIPCvk/BF99sQglFiGDVSsGxFvAgE8JAUEL0tKYi9RMMk1yJnPOzJm9lqyTSXpJHMXsl8M5e5/1W9+31tqELkunkIjciffQc/oVaHCG0e4ThShSf4rTn8n/5XLmxdo33WLQP23qj73lVuaZCbSr8LbmQAyAAXVQFZBSGq7nOVDb/y0tv5+lQX91v1j7AvTb3GiYe/4S1r6H50EoAabOSTUFClYHUQfWRBGae7KZxfUT+0H2APQHPBxgYEnX59RLQMkDEUO1c5IUpApVB1KJn9BEDyPZdz3/0vxTD6rYA3BfZz4OtfCWRquWPYjMczCbRQrA3k2BKRGwCqBtiOYf50L75jk6h6/uhewBtCaP1ML62mFObHtuACbwjgIAQg8CzC5KcTaV/jI55Je6AoLPUxq1WmaNWmGJrKBQtuxtEUgEGluFjkUAOQfKpTM30ufDJ7oCGhVoZAHIYgPqQdgyNou2V6wgblcFxxSBOAFnPfyavYDT3QET+KvlcMyimy0MiDJ4VwEgQnHgGCBWZEDgwNk0rmRfxRvdazCBj/wm3ibLfBtCbF3TUUBxmaGiILLvptLscqC+QzhL5/FTV4Bew/HaHdwmr6PAMr1HgVi2HQWyY5HCCjLVdxEv/Gub2oH2Zxi64+OLWAHHBVbzarfMpsBqpLES21k6msOjVIb7TwA7pFfx7KqP70hQiO2520ViDUwCiRUAc0cP4en9gm83XbfLroJUtU5Nikdtp4cQA4S2W/XYaPcYXQEWcv1ystWMouSOgLhNDSfQpIdG3ygK/+s23fmpdgkatq0Ud02y28EgGQ+bh99B74EAq1ce+bC19se7NlBmBgHCAIfJLJB/6MKpN29OHAiwsVF7bf5241PdWoYLagibkWy5PG+2UkhEa6eGhoYWDwSo14PXb9268UnbiURthzAIKAwDDYMGO+ceK5VK8wcC+L4/vLi4eFVEEEURwjCUKIrY9300m83jw8PDKwcC2M+Tk5Pl5eXliWw2i42NDZ2dnaWBgYGTY2NjS92C7zsHlUrF6+/vT1ar1XQul+P19fX85ubm1vT09NTMzMyZhYUFDA4OflAqld7P5/OZYrG41Wg0pL+/v1mtVqNyuXzfNO/Owfj4+EVmfhnASRHpY2brb09EcsxMqVSqubKyUshkMu1isdgKgiBFRDZ0DRFxRFQnopqILHqed21kZGT8PgWVSqUQRdERESk653o9z8sRUUFV1Z4A8mS3T3x7Kjnntpi53nkPPM+ri8gGM68nk8m1crkc7/0NhPIRN5eg+/QAAAAASUVORK5CYII=";
var addBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACUElEQVQ4T6WTTWgTURDH/+/tbnaz2bRJg4VQDdhiLI0f1NKKpdCreBCpIIgIQqEHbQ/1pAchF6UKxYPgQa+e4sVWMKgFEclBRHrwo4eKERGCH/1INt1NsrtvJNlUW4tQ6IN3mpnfzPxnhmGHj+0wHtsGZNKpgGlF1IqukGY5bPRWzqwn/wPITO7ukEgSGyuyrDUMDnUrnUePPQSCAyDyzYwBzFxgyds9DYD7IPW66IYHaN2hSRG1CvRUPwT3ICrFDfkIRiQG+cj9Ogr4OtVmF82KtjG7cF20dO1D7PAA3NJ3gEmb5AppHOrQjA/4PN1eVvYcDFGzI0ECerQdeiyM2q9FyCEZngOQ22QwQjgqQ+l76gPo3TlaXVr+68EYRM2C8FxIioy3N0x0nWhFtN+FVwUkFsD81AqcEh9uAOwXfWRam/QDA4Mc5Hhzp4T8TAGGomLoZjdaez3kRn9gqbAEMjS/5rW5A1sADbE54NoesmM/EfAAlSkw4mGsFpZRqRF4CGd9wLNOMu3miP7ZLCYDwiU8Hy/BM+tzJzg1YPhaCMmr33wNStk4mfbmFtY5nBOUQBBPJgXKhRLAJYgqcHI6jsTFDz6g/DhAZoVv2eqGlRnIjAdgrRTBhYAeJtiWBMfjSPb2nGeZ2dm9kbVX1yN4f0qQJAOo/3o/XNYkzN9dQH4uDwkODl0+jsSgXs1eeKmSUwaXFbB0Oq0lEvt3GUZrWAmqBheeIjg0wZgmQ4LrWfh05vSVtpGRRx1jl3LkOK65+JF9mZi4Ry0tk9s+pv9d7W97deRNAWjIZwAAAABJRU5ErkJggg==";
var clearBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACz0lEQVQ4T6WTX0hTcRTHz+/+7rybd3fTNXUhNv9npVE9mIGRlnvIh/6AZkQovRglLREzyYcm1YNSGRJEiA8ZA9GHNNAigkSlCJEK08QUNsvU1Jm7NnfZb/fEhCQTe+n3eH7n+zlfDt9D4D8f2UyPk7uPgcyKIEy9T1JG32zWtwHQ3Wgy5Ns9XnzBvw0EWKbGKADJVjYdtO6jzbErrHD/NyUA4oTinw+n6N+qi6AnyOFgZ8iBIyeHd/T0sD/drANg97byuenJBo4HoBwAFQC05tgepjVfHa2A3PAVkpX24f3JxuRkwT4+roRA6wBLjySXIstWbaiqBZj5HAUTXdGQc3MM+h0Js7Z3Y5aQ6KXVWibFxDhkn+/IGmCk3rjPjEuDr2LLoTvqBuTRFhBKqsGzwIE+IgZYwAMJGemV84w9Eb3euwsu1/EfHLd3DdDU9bjeNnr+SotYAwOGQuBEA5TUJcDcBA8BPwFCOEDGIDIy8mJwZYVpEatOLSykrAJyHG16GmuVCS+CyCmwHBTg+uJpSMePENADNNklEAQCYYCLl2XZtGGJZ9qHrrncrls8zwOlGqCUgj4iesRGunbGdtweGmz3ZlCBgCAIQXNqasrw7Kz/nts9vbbEQ43PZ5e9XrMgGYcJC2RQjeDstdvO5rW5aqTh3qb02uIkQ3h4hR+xQKPTgUmne1Y6NZW/CsisbDiwpDW9NujFooHqgrY91Q/iJWtaVt+F3Na/01cKoEkTRTtjrKNKUSZWAclHLwma7Nza1Ljo3s7i7O7ttc7cuEjDw6TEpOav7qmnXWW2T/86lw0RTXO03pF/LldwHIUvdec2jfBvKGlubpYsli3xQUU1IaLR5/MFvyuQ7AmqOzIiNP1hOj0falZVlXAc50XEACFkiVLqYYy5iNPpTETEg4QQCyJKACBxACohKKnAaUJiRFRDIkQMOZIJITIizhBC+n4Bqj0YeIFAVHoAAAAASUVORK5CYII=";
var exportBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB60lEQVQ4T43Sz2vTYBgH8O+TpkzMsrQq7lhF1AkNIYIljIk/L64H0c1RmXjZQS+KP0DQf8CLKIhQqMKoF0WG9OBB9KAoHiZd2SHSg22hlEKdUkswNanN+8oGHTYIyXt+3g/P+/2+hBCn0WhMu657izEWJyIuiuKKZVlXNU2zKeh+u91Ot1qtVwB+yLL8zvO8UcuyTimKspZIJMYDgXq9/rHT6UxpmrY5W6lUbtq2fa/ZbJ4IBMrl8hfP84RkMnlgsG02m00ZhrFcrVZnA4FisWgyxqKpVGr/AMjlcpOqqn6q1WpzgcD7D8smY1w8ftSYGAD5fH67qqqPTNO8swH030bStivFwT0+GPIACCT2vtKl+wCJe3jueqT7840yh/a/wdPSbUzMTI+XPacLwL8QB3EHAAenUURi/SU69OvcEJC/AX3+GErun6BCga1jKNBJnBkCnlyBfuEISm4/GBiTUaC0H7gMPXM4HBCXUBBmfUB2AXpmEiUnxBN2yChE533Aw4vQzxvhN5AWfMCDsziYmcJKmBBjI3gZu4aZoRBfPH28e++3u6sEJq1X/58uN+YF9NCUT7+2d6afRyNel4jWHMdZpcXFZ7soumUfJ2EbJ64QSOIMIyTwzU+1DnBGJKL3m7jTJ6IOEX0H8Pkv/NK/JJJbTNcAAAAASUVORK5CYII=";
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", array_Icons[i] );
x.setAttribute("style", "width: 15px; height: 15px; margin-right: 5px;");
document.body.appendChild(x);
document.body.appendChild(br);
}
console.log(document.body.innerHTML)
其实可以查看生成的html(也就是document.body.innerHTML
):
<img src="url('submitBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('addBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('clearBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('exportBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br>