Question

I’m reusing an old application of mine and want to change the code so I’m applying the DOM structure that I build up to a node’s class instead of it’s id.

Below is a piece of the code and as you can see I try to combine jQuery (getting the node by it’s class) with the old structure, but something doesn’t work properly here.

Is it possible to combine jQuery and JS native like this?
If not, is there another way to accomplish what I want to do?

var gamearea = $('<div/>', {
    text': 'testarea',
    class': 'gamearea'
}).appendTo('.memory:last');    

alert("this.rows: " + this.rows);

for (var j = 0; j < this.rows; j++){
    var box = document.createElement('div');
    for (var i = 0; i < this.cols; i++){

        var iterator = (this.cols * j) + i;

        var img = document.createElement('img');
        var aNod = document.createElement('a');

        aNod.href = "#";
        img.src = "pics/0.png";

        aNod.appendChild(img);
        box.appendChild(aNod);
    }   
    gamearea.appendChild(box);
}

Answer 1

You should be able to get it working by changing gamearea.appendChild(box); to gamearea[0].appendChild(box);

The reason behind that is you can get the bare DOM element for a jQuery extended object by simply doing obj[0], where obj is a jQuery extended object obtained like obj = $(...) etc. And the appendChild method in your code is a method of bare DOM element.