Jquery help needed - selecting a dom element right after creating it

Answer 1

Consider creating the node as an element before inserting it, as then you have a reference to it and can skip the later lookup. Something like:

$.getJSON("/data/all" , function(data){
                nodes = data;
                len = nodes.length;
for(i=0; i<len; i++){
                    if(i==0){
                       // works on FF && Chrome
                       var newNode = $('<li id="node-'+ nodes[i].id +'"><input type="checkbox" name="">'+ nodes[i].name);
                       $('ul#root').append(newNode); 

                       // works on FF only
                      newNode.append('<ul id="' + nodes[i].id +'>'); 

                    }
                     else{
                       ...   
                       ... 
                    }

Answer 2

Your HTML was invalid, and Chrome did not accept it. Firefox was more lenient in what it allowed. Whenever there are lots of quote openings and closings because of a dynamic value, it's better to use the object style element creation in jQuery rather than doing it all in a string. The problem is with this line:

$('li#node-'+nodes[i].id +'').append('<ul id="' + nodes[i].id +'>');

The output ul it produces is (notice the missing quote):

<ul id="1>

For creating complex selectors, it is much better to use string replacement:

var li = "li#node-{id}".replace("{id}", nodes[i].id);

To create elements with dynamic attributes, use objects to initialize:

var ul = $('<ul>', {
    id: nodes[i].id
});

The code below although a little verbose and maybe a little slow is hard to get wrong especially in a language like JavaScript where a missing quote can do havoc as we just witnessed.

var li = "li#node-{id}".replace("{id}", nodes[i].id);
var ul = $('<ul>', {
        id: nodes[i].id
    });
$(li).append(ul);