Double click to edit and add new value to li $(document).on('dblclick', '#li', function () {
    oriVal = $(this).text();
    $(this).text("");
    input = $("&lt;input type='text'&gt;");
    input.appendTo('#li').focus();

});

$(document).on('focusout', 'input', function () {
    if (input.val() != "") {
        newInput = input.val();
        $(this).hide();
        $('#li').text(newInput);
    } else {
        $('#li').text(oriVal);
    }

});


So far, I still can't do OOP in jQuery.  Can you improve the above code?
I wasn't sure how to answer this, so I went with what your code does...


Scope your variables.
Change your code to target all li instead of one element with the id li.
Use this when events are triggered to make sure you have the correct element.
Remove the added elements instead of hiding them.
Remember to call on using the smallest possible parent container. Possibly a &lt;ul&gt; or &lt;ol&gt;?
Use short circuiting where appropriate.
Use jQuery.parent() to get the appended elements parent.


Putting all those change together:

var oriVal;
$("#parentUL").on('dblclick', 'li', function () {
    oriVal = $(this).text();
    $(this).text("");
    $("&lt;input type='text'&gt;").appendTo(this).focus();
});
$("#parentUL").on('focusout', 'li &gt; input', function () {
    var $this = $(this);
    $this.parent().text($this.val() || oriVal); // Use current or original val.
    $this.remove();                      // Don't just hide, remove the element.
});


Here's the JSFiddle.