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

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