Javascript to jQuery convert code

Question

I'm having difficulty in changing the following code to use jQuery. Could anyone point me in the right direction?

function addListItem() {
 var listItem, container, dataList = document.getElementById('dataList');
 // Create our list item
 listItem = document.createElement('div');
 listItem.setAttribute('data-bb-type', 'item');
 listItem.setAttribute('data-bb-img', 'images/icons/icon11.png');
 listItem.setAttribute('data-bb-title', 'Title ');
 listItem.innerHTML = 'My description';
 // Create a dummy container
 container = document.createElement('div');
 container.appendChild(listItem);
 // Apply the styling
 bb.imageList.apply([container]);
 // Append the item
 dataList.appendChild(container.firstChild);
 // re-compute the scrolling area
 if (bb.scroller) {
 bb.scroller.refresh();
 }
}

• jackwanders: perhaps you could post your attempt at jQuery, and we could help work through the problems you encountered. You're more likely to get help that way than simply asking for someone to do it for you.
• rwilliams: docs.jquery.com/Main_Page
• Nick Hagianis: Why do you need to convert it to jquery anyway? Seems like it's perfectly good javascript to me.

Answer 1

First of all, let me tell you that your code looks perfectly fine.

Now, to select an element by its ID using jQuery, use the ID Selector ("#id"). Thus, instead of using document.getElementById("dataList"), you'd use:

$("#dataList")

To create DOM elements on the fly, use jQuery( html, props ). For example, to create your list item, you'd use:

listItem = $("<div />", {
 data-bb-type: 'item',
 data-bb-img: 'images/icon/icon11.png',
 data-bb-title: 'Title'
}).html("My description");

Finally, to append elements to another, use .append(). With this function, your dummy element creation could be done using the following:

container = $("<div />").append(listItem);