jquery - 动态创建的 p 元素未附加到动态创建的 div

Question

由于某种原因，未创建以下函数中的 p 元素（和/或附加到 div）。如果我将它与 div 一样附加到“#listOfListObjects”，它可以工作，但我希望它在 div 中。

我究竟做错了什么？

    $('#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

改变这个

var listDiv = 'listDiv' + i;

到

var listDiv = '#listDiv' + i;

或者

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

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

到

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

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

Answer 2

text不是<p>元素的属性。

你应该改变：

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

到

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

Answer 3

我最喜欢的方式是这样的

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

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

选择器、ID 等没有问题……只是使用了对新 div 的简单引用