javascript - 将 Javascript 方法 "createElement"、 "appendChild"、 "setAttribute"更改为 Jquery

Question

当我尝试将 javascript 方法 createElement、appendChild、setAttribute 更改为 Jquery 时，我遇到了困难。我得到了名为“showThumbnail”的函数，它显示新上传的 img 的缩略图。我必须将其 javascript 代码更改为 JQuery。当我必须替换“getElementById”方法时，这很容易，但是当我处理“createElement”以及当我尝试向新对象、innerHTML 及其父对象添加属性时，楼梯就开始了。这是showThumbnail函数

function showThumbnail(files) {
    var file = files[0]

    //var thumbnail = document.getElementById("thumbnail");
    var $thumbnail = $('#thumbnail').get(0);

    var pDiv = document.createElement("div");
    var image = document.createElement("img");
    var div = document.createElement("div");


    pDiv.setAttribute('class', 'pDiv');
    $thumbnail.appendChild(pDiv);


    image.setAttribute('class', 'imgThumbnail');
    pDiv.appendChild(image)

    div.innerHTML = "X";
    div.setAttribute('class', 'closeDiv');
    pDiv.appendChild(div)

    image.file = file;
    var reader = new FileReader()
    reader.onload = (function (aImg) {
        return function (e) {
            aImg.src = e.target.result;
        };
    }(image))
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    image.onload = function () {
        ctx.drawImage(image, 100, 100);
    }
}

这就是 JFIDDLE 中的工作方式:http://jsfiddle.net/r0taz01L/6/

我正在考虑这个

var $image = $("<img>", { class: "imgThumbnail" });
var $pDiv = $("<div>", { class: "pDiv" });        
var $div = $("<div>", { class: "closeDiv" });

$thumbnail.append($pDiv);
$pDiv.append($image);
$pDiv.append($div);

你觉得怎么样？

Answer 1

我觉得应该是这样的。

var $thumbnail = $('#thumbnail').get(0);

var $image = $("<img>", {
    class: "divThumbnail"
});
var $pDiv = $("<div>", {
    class: "divThumbnail"
});
var $div = $("<div>", {
    class: "closeDiv"
}).html('X');

$pDiv.append($image,$div).appendTo($thumbnail);
var reader = new FileReader();
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
reader.onload = function (e) {
    $image[0].src = e.target.result;
}
$image.on('load', function () {
    ctx.drawImage($image[0], 100, 100);
})

Demo