如何将 DOM 元素附加到动态新添加的 DOM 元素

Posted 2023-05-09

【中文标题】如何将 DOM 元素附加到动态新添加的 DOM 元素

【英文标题】：How do I append DOM-elements to dynamically newly added DOM-elements

【发布时间】：2019-05-24 21:31:34

【问题描述】：

通过单击汉堡按钮将下拉菜单动态添加到 DOM。我想动态地将一些内容附加到这个动态创建的下拉菜单中。

我尝试了 append 方法。正如预期的那样，这不起作用，因为在执行代码时下拉菜单不存在。

$(".dynamicallyaddeddropdownmenu").append("some content");

我也试过了：

$(document).on("focus", ".dynamicallyaddeddropdownmenu", function()
    $(".dynamicallyaddeddropdownmenu").append("some content");
);

CSS::after 不起作用，因为添加的内容必须是可点击的。

【问题讨论】：

您需要提供更多背景信息或问题的工作示例。第二个 sn-p 将起作用，前提是您的元素可以被关注。

尝试在创建动态元素的代码之后使用 append 函数

【参考方案1】：

假设您有 html，单击按钮会生成动态下拉列表：

$('#btn').click(function () 
        if ($('.dynamicallyaddeddropdownmenu').length == 0) 
        $('#div1').append('<select class="dynamicallyaddeddropdownmenu"></select>');
        AppendInDropdown();
    
    );
    function AppendInDropdown() 
        $('.dynamicallyaddeddropdownmenu').focus(function () 
            $(".dynamicallyaddeddropdownmenu").append('<option value="1">1</option>'); //append some content
        );
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1"></div>
<br />
<input type="button" id="btn" value="Click Me" />

动态添加下拉菜单时需要调用 AppendInDropdown() 函数

【讨论】：

谢谢，我会调查的！谢谢！

【参考方案2】：

我不是 javascript 专家，但我之前在使用 jQuery 时遇到过这个问题，我记得当我使用 .after() 而不是 .append() 和 .on() 变体来动态添加项目时，它确实有效。