Dynamically created p element not appended to dynamically created div

Question

By some reason the p element in the function below isn't created (and/or appended to the div). If I append it to '#listOfListObjects' as with the div, it works, but I want it inside the div.

What am I doing wrong?

    $('#addListObjectSubmit').click(function (e) {

        var listObjectName = $('#m_newListObject').val();

        if((listObjectName == null) || (listObjectName == '')) {
            return false;
        }
        else {
            var listDiv = 'listDiv' + i;

            $('<div>', {
                class: 'listObjectShow',
                id: listDiv
            }).appendTo('#listOfListObjects');

            $('<p>', {
                class: 'listObjectShow',
                text: listObjectName,
                id: 'listObject' + i
            }).appendTo(listDiv);
        }

        i += 1;

        e.preventdefault();
    });

Answer 1

Change this

var listDiv = 'listDiv' + i;

to

var listDiv = '#listDiv' + i;

or

$('<div>', {
    class: 'listObjectShow',
    id: listDiv
}).appendTo('#listOfListObjects');

$('<p>', {
    class: 'listObjectShow',
    text: listObjectName,
    id: 'listObject' + i
 }).appendTo(listDiv);

To

$('<div>', {
     class: 'listObjectShow',
     id: listDiv
 }).appendTo('#listOfListObjects');

 $('<p>', {
     class: 'listObjectShow',
     text: listObjectName,
     id: 'listObject' + i
 }).appendTo('#' + listDiv);