Javascript 如何将对象添加到html字符串？

我试图通过拖放操作加载多个图像，然后调整它们的大小并将它们添加为缩略图。调整大小的部分是非常重要的，因为图像可以非常大，我想使缩略图的大小较小

这是我的密码：

loadingGif(drop);

for (var i=0;i<files.length;i++) {
    var file = files[i];
    var reader = new FileReader();          

    reader.onload = function(e) {
        var src = e.target.result;

        var img = document.createElement('img');            
        img.src = src;
        var scale = 100/img.height;
        img.height = 100;
        img.width = scale*img.width;    

        output.push('<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>');

        if(output.length == files.length) {
            drop.removeChild(drop.lastChild);
            drop.innerHTML += output.join('');
            output.length = 0;
        }
    }

    reader.readAsDataURL(file);
}

loadingGif（drop）；
对于（var i=0；i您可以创建具有任意属性的对象，以便同时保存图像和HTML字符串：

var result = {
   html: '<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>',
   imgTag: img
}
output.push(result);

var结果={
html:''+img+''，
imgTag:img
}
输出推送（结果）；

然后，当您稍后迭代结果数组时，您可以以
result.html
或
result.imgTag
的形式访问这些部分（将第一部分更改为您分配给对象的任何变量）

这确实意味着您需要更改当前的
output.join（“”）
到一个循环，该循环实际遍历
输出的值
，并连接它们的
html
属性。如果您真的想避免这种情况，可以将图像粘贴到一个单独的输出样式数组中。但这并不是很干净，而且会有两个数组内容不同步的风险。我坚持使用h保留同一对象的两个独立属性，更干净更好。
您可以创建具有任意属性的对象，以便同时保存图像和HTML字符串：

var result = {
   html: '<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>',
   imgTag: img
}
output.push(result);

var结果={
html:''+img+''，
imgTag:img
}
输出推送（结果）；

然后，当您稍后迭代结果数组时，您可以以
result.html
或
result.imgTag
的形式访问这些部分（将第一部分更改为您分配给对象的任何变量）

这确实意味着您需要更改当前的
output.join（“”）
到一个循环，该循环实际遍历
输出的值
，并连接它们的
html
属性。如果您真的想避免这种情况，可以将图像粘贴到一个单独的输出样式数组中。但这并不是很干净，而且会有两个数组内容不同步的风险。我坚持使用h保留同一对象的两个独立属性，更干净更好。
一般来说，将DOM元素作为字符串使用是一种坏习惯。您应该使用本机javascript（或您正在使用的库/框架）命令来创建元素并设置其属性

例如，如果您有一个id为“image container”的元素，其中包含所有图像，则可以编写

var container = document.getElementById( 'image-container' );
var img = document.createElement( 'img' );

container.appendChild( img );

与包含所有输出的大型HTML字符串不同，您可以只引用包含所有其他元素的元素，并在加载所有元素后立即将其附加到正文中，或者将其隐藏并在加载完成后显示

if (output.length == files.length) {
    drop.removeChild(drop.lastChild);
    drop.appendChild( container );
    output.length = 0;
}

请记住ID必须是唯一的。同一文档中不能有多个具有相同ID的元素。
一般来说，将DOM元素作为字符串使用是一种坏习惯。您应该使用本机javascript（或您正在使用的库/框架）命令来创建元素并设置其属性

例如，如果您有一个id为“image container”的元素，其中包含所有图像，则可以编写

var container = document.getElementById( 'image-container' );
var img = document.createElement( 'img' );

container.appendChild( img );

与包含所有输出的大型HTML字符串不同，您可以只引用包含所有其他元素的元素，并在加载所有元素后立即将其附加到正文中，或者将其隐藏并在加载完成后显示

if (output.length == files.length) {
    drop.removeChild(drop.lastChild);
    drop.appendChild( container );
    output.length = 0;
}

请记住ID必须是唯一的。同一文档中不能有多个具有相同ID的元素。
HTML在插入页面时被解析为元素，但这并不意味着这两种格式1到1是可翻译的

您可以使用
outerHTML
翻译
”

但是这也开始让人毛骨悚然。所以最后，在创建其他html之后，您可以附加image元素

"<div id='image'>"+ img.outerHTML +"</div>"

drop.innerHTML=“”
document.querySelectorAll（'.image:last child'）[0].appendChild（img）；

然而，值得思考的是：当你开始在JS中使用这么多HTML时，你可能需要重新思考一下你的方法。这是一种很难维护且很容易出现人为错误的模式。
HTML在插入页面时被解析为元素，但这并不意味着这两种格式1到1是可翻译的

您可以使用
outerHTML
翻译
”

但是这也开始让人毛骨悚然。所以最后，在创建其他html之后，您可以附加image元素

"<div id='image'>"+ img.outerHTML +"</div>"

drop.innerHTML=“”
document.querySelectorAll（'.image:last child'）[0].appendChild（img）；

然而，值得思考的是：当你开始在JS中使用这么多HTML时，你可能需要重新思考一下你的方法。这是一种很难维护且很容易出现人为错误的模式。
正如其他人所说，人们会避免/选择使用字符串来表示DOM元素，这也是一种wtf时刻阅读代码的原因尝试混合使用这两种表示html元素的方法。也就是说，您可以跳过将图像作为元素本身创建，而是将适当的字符串插入结果（堆栈？）

这将具有所需的缩放效果：

"<div id='image'><img src='"+ src +"'></div>"

var src=e.target.result；
var imgStr=“”；
输出推力（''+imgStr+''）；
正如其他人所说，人们之所以会避免/选择使用字符串来表示DOM元素，是有原因的。此外，阅读试图混合使用这两种表示html元素的方法的代码有点像wtf。也就是说，您可以跳过将图像创建为元素本身，而不是将适当的字符串插入其中你的结果（堆栈？）

这将具有所需的缩放效果：

"<div id='image'><img src='"+ src +"'></div>"

var src=e.target.result；
var imgStr=“”；
输出推力（''+imgStr+''）；
您的对象文字语法不正确valid@jbabey呸，你说得对！现在修好了(