将Javascript方法“ createElement”，“ appendChild”，“ setAttribute”更改为Jquery

Question

I'm having hard times when I try change javascript method createElement, appendChild, setAttribute to Jquery. I got function called "showThumbnail" which shows a thumbnail of newly uploaded img. I have to change it's javascript code to JQuery. It's easy when I have to replace "getElementById" method but the stairs begin when I dealing with "createElement" and when I try to add attributes to new object, innerHTML and its parents. Here is showThumbnail function

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

This is how it work in JFIDDLE: http://jsfiddle.net/r0taz01L/6/

I was thinking about this

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

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

What do You think?

Answer 1

I think it should be like this.

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