jQuery can't find the html elements just appened

I've got following html code:

<div id='list'>
  <ul></ul>开发者_开发技巧
</div>

And I have following jQuery script:

function append_list(){
  $('ul').append('<li><input type="image" name="original" value="'+SOMEVALUE+'"></li>');
}

function find_input(){
  //some code to find the just appended input element.
}

$(document).ready(function(){
  append_list();
  console.log($('input'));
  find_input();
});

And when I look into my browser console, the output of console.log was just an empty array "[]", But if I input console.log($('input')); in my browser console after page loaded, it can feedback with correct data... Did I do anything bad with .append() function?

Thank you for your help.

----EDIT----

Thanks guys, I'd like to add something to my question. I've tried your suggestion to setTimeout(); but still can't find input element I've appended. I've also add console.log($('input)); into function append_list(); also no help... Now I'm stacked here :-(

You should setup a callback function.

Check out: http://jsfiddle.net/bryandowning/4mS9L/

function append_list(someval, callback){

    //save a reference to the element you are appending
    var $element = $('<li><input type="text" name="original" value="'+someval+'"></li>');

    //append it to the list
    $('ul').append($element);

    //if a callback function was provided, execute it.        
    if(arguments.length === 2){
        //pass the callback function the saved reference to the appended element
        callback($element);   
    }
}

//this is the callback function
function find_input(item){
    var $input = item.find("input");

    $input.after("The value of the input element is: " + $input.val());
}

$(document).ready(function(){
    //example with the callback provided
    append_list("First Element", find_input);

    //example without the callback provided
    append_list("Second Element");

});

I find it odd that append_list() doesn't complete before console.log... which is what some are suggesting, but I'm stumped to find another reason.

However, you can guarantee a reference to your input like this:

function append_list() {
   return $('<li><input type="image" name="original" value="'+SOMEVALUE+'"></li>')
      .appendTo('ul')
      .find('input');
}

The value returned from append_list() is now directly referencing the input that you created, rather than searching the document for it from scratch.

Try giving the list an id:

<ul id='myul'></ul>

and then

$('#myul').append(...

Well, it should find it... try allowing it to "breath"...

append_list();
setTimeout(find_input, 1);

It looks like console.log is running before the UI changes are completed, and that's why it's not finding the added elements. If you use setTimout with 1 ms delay will force the execution of the following code to be delayed until the UI changes are completed, which should then give the right result.

append_list();
setTimeout(function() {
  console.log($('input'));
  find_input();
}, 1);