在 DOM 中附加一个动态（新）创建的元素

Posted 2023-05-09

【中文标题】在 DOM 中附加一个动态（新）创建的元素

【英文标题】：Append a dynamicaly (newly) created element in DOM

【发布时间】：2018-09-06 22:30:59

【问题描述】：

我正在尝试以递归方式动态附加元素，即：

我有一个带有“request-get”类的锚标签，单击此锚标签我附加了一个带有多个具有相同类名“request-get”的锚标签的div，并在单击最后一个创建的锚时附加了div标签：这是我的代码

注意：ajax 调用工作正常，我在新创建的锚标签的点击事件后获得了所有数据，但我没有得到新创建的 Div 的引用

$(document).on("click", ".request-get", function (event) 
    var request = new RequestModule.AjaxRequestBuilder(this).build();
    var child = $(this).data('target');
    var childDocument = $(document).find(child);
    console.log(childDocument);
    request.call(
        success: function (response) 
            $(child).empty();
            console.log($(child));
            for (var i in response) 

                var a = $('<a/>',  href: "" )
                            .attr('id', response[i].code)
                            .attr('class', 'request-get child')
                            .attr('data-id', response[i].id)
                            .attr('data-controller', 'objectif')
                            .attr('data-controller-suffix', 'children')
                            .attr('data-method', 'get')
                            .attr('data-target', '#details_' + response[i].code)
                            .attr('data-toggle', 'collapse')
                            .css('display', 'block')
                            .text(response[i].code+' - '+response[i].intitule);

                var div = $('<div/>',  id: 'details_' + response[i].code )
                            .attr('class', 'details collapse child');


                $(child).append(a);
                $(child).append(div);

            
        ,

        error: function (response) 

        
    );
);

【问题讨论】：

don't get the reference of the newly created Divs 是什么意思？究竟是什么问题？

【参考方案1】：

我认为您可能使用了错误的变量，因为您使用的是 child 变量而不是 childElement 一个

【讨论】：

childDocument*

即使我打印 childDocument，它是 Empty javascript Object，也没有引用它！

你可以直接试试var child = $($(this).data('target'));

【参考方案2】：

您新添加的元素没有相同的类。您提供的是“request-get-objectif”而不是“request-get”

【讨论】：

那是我的代码的最后一次更新，我打算尝试别的东西并发布了错误的代码！对不起，谢谢你的回答