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

Posted 2023-05-09

【中文标题】动态创建的 p 元素未附加到动态创建的 div

【英文标题】：Dynamically created p element not appended to dynamically created div

【发布时间】：2012-10-16 13:31:47

【问题描述】：

由于某种原因，下面函数中的 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();
    );

【问题讨论】：

对于我未经测试看到的内容，我认为您错过了选择器中的#，所以应该是.appendTo("#" + listDiv); imo。

【参考方案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);

【讨论】：

第一个选项不起作用，但是 "appendTo('#' + listDiv)" 起作用了。谢谢！

【参考方案2】：

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

你应该改变：

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

到

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

【参考方案3】：

我最喜欢这样的方式

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

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

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