Recursive list generator function in javascript

I have setup a fiddle http://ift.tt/1Mx5zOI here.

The following code generates an html list from an object

function generateList(data, $e) {
    // create an inner item
    function createInner(obj) {
        var li = $('<li>');
        li.text(obj.text);
        if (obj.children != undefined && obj.children.length > 0) {
            innerList = $('<ul>');
            for (var i = 0; i < obj.children.length; i++) {
                var child = obj.children[i];
                innerList.append(createInner(child));
            };
            li.append(innerList);
        }

        return li;
    }
    for (var i = 0; i < data.length; i++) {
        $e.append(createInner(data[i]));
    }
}

The following dataset has been used as an example -

[
    {
        "text": "item1"
    },
    {
        "text": "item2",
        "children": [
            {
                "text": "subItem",
            },
            {
                "text": "another subItem",
            },
            {
                "text": "last subItem",
            }
        ],
    },
    {
        "text": "item3",
        "children": [
            {
                "text": "Hello",
            },
            {
                "text": "Inner List",
                "children": [
                    {
                        "text": "innerItem1",
                    },
                    {
                        "text": "innerItem2",
                    }
                ]
            },
            {
                "text": "Bye",
            }
        ],
    }
]

The list item which has item3 written should have an inner list containing two more children, but it is not happening. The item labelled Inner List is not shown in the html output. Neither is the item labelled Hello. item3 contains only innerItem1, innerItem2 and Bye.

How can I overcome this ?