Adding new nested div to document

Adding new nested div to document

I want to add a div with a child div to the document but append() seems to
be the wrong option for this, what should I use instead?
//Create Statusbar
var status = $('#status');
for (var i = 0; i < resources.length; i++) {
var resource = document.createElement('div');
var resourceCounter = document.createElement('div');
resourceCounter.id = "r" + (i + 1);
//resource.className = "resource";
resource.innerHTML = resources[i];
resourceCounter.innerHTML = saveData.resources ? saveData.resources[i]
: 0;
resource.style.background = "url('images/resources/" + resource.id +
".jpg') 0 26px / 100% auto no-repeat";
resource.onclick = function () {
alert(this.id);
};
resource.append(resourceCounter);
status.append(resource);
}
resource.append(resourceCounter); --> Uncaught TypeError: Object
#HTMLDivElement has no method 'append'