Question

I am currently learning jQuery. I know that jQuery is a custom library for JavaScript.

I am doing some learning examples in a book that is only using JavaScript, and to further my learning experience, I am trying to make use of jQuery for anything that might be more efficient.

So, I have this code:

function addLetter(foo) {
    $(foo).unbind('click');
    var tileLetter = $(foo).attr('class').split(' ');
    var letter = tileLetter[2].charAt(1);
    if (document.getElementById('currentWord').childNodes.length > 0) {
        $('#currentWord p').append(letter);
    } else {
        var p = document.createElement('p');    
        var txt = document.createTextNode(letter);
        p.appendChild(txt);
        $('#currentWord').append(p);        
    }
}

Question #1:

If I change document.getElementById('currentWord').childNodes.length to $('#currentWord').childNodes.length it doesn’t work. I thought the jQuery selector was the same thing as the JS document.getElementById as that it brought me back the DOM element. If that was the case, it’d make sense to be able to use the .childNodes.length functions on it; but it doesn’t work. I guess it’s not the same thing?

Question #2:

The code is textbook code. I have added all the jQuery that there is in it. My jQuery knowlede is limited, is there a more efficient way to execute the function?

The function’s purpose:

This function is supposed to create a p element and fill it with a Text Node if it’s the first time it’s run. If the p element has already been created, it simply appends characters into it.

This is a word generating game, so you click on a letter and it gets added to a ‘currentWord’ div. The tile’s letter is embedded in the 3rd css class, hence the attr splitting.

Thanks!

Answer 1

Question #1:

jQuery returns a jQuery object. To return it to a regular javascript object use $(object)[0] and you can then treat it as a plain javascript (or DOM) object.

Question #2:

The efficiency looks good to me. Although you might want to use spans instead of p elements.

I guess one thing you could do (even though yours looks to run very fast) is cache the dom element:

function addLetter(foo) {
 $(foo).unbind('click');
 var tileLetter = $(foo).attr('class').split(' ');
 var letter = tileLetter[2].charAt(1);
 var currentWord = document.getElementById('currentWord');
 if (currentWord.childNodes.length > 0) {
    $(currentWord).find('p').append(letter);
 } else {
    var p = document.createElement('p');    
    p.innerHTML = letter;
    currentWord.appendChild(p);        
 }
}