javascript - 如何向 html 字符串添加对象？

Question

我正在尝试通过放置操作加载多个图像，然后调整它们的大小并将它们添加为缩略图。调整大小部分非常重要，因为图像可能非常大，而我想让缩略图变小。

这是我的代码:

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);
}

正如您可能会告诉我的那样，我在拖放区中插入了一个正在加载的 gif 图像，直到所有文件都加载完毕(output.length == files.length)。加载文件时，我将 html 添加到一个数组中，如果加载完成，我将打印该数组。问题是我似乎无法将 img 对象(我需要这个对象来调整图像大小)添加到 html 字符串中，这似乎很明显，因为 img 是一个对象......所以我对你们的问题是:如何做我做这个？ :)

Answer 1

一般来说，将 DOM 元素当作字符串来使用是一个坏习惯。您应该使用 native 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 的元素。