如何用jQuery在动态创建div时向其父容器追加元素？

页面初始状态下，#LightBoxNumber是空容器：

<div id="LightBoxNumber" class="LightBoxShadow" style="font-size: xxx-large;"></div>

之后会通过一段原生JS代码，向这个容器中插入.WinnerBanner元素：

document.getElementById("LightBoxNumber").innerHTML = "<div class=\"WinnerBanner\">Congrats to all Winners!</div>";

插入后结构变为：

<div id="LightBoxNumber" class="LightBoxShadow" style="font-size: xxx-large;"><div class="WinnerBanner">Congrats!</div></div>

现在需要写一段独立的jQuery代码，在.WinnerBanner被创建的同时，给#LightBoxNumber追加一个空的<span>，最终要达到的结构是：

<div id="LightBoxNumber" class="LightBoxShadow" style="font-size: xxx-large;"><div class="WinnerBanner">Congrats!</div><span></span></div>

我试过以下几种写法，都没成功：

$(document).ready(function(){
    $('.WinnerBanner').each(function(){
        if($(this).find('.WinnerBanner').length > 0){
            $(this).prepend('Yes!');
        }
    });
});

$(document).ready(function() {
    if( $('div.WinnerBanner').length > 0 ){
        $('#SelectNumbersBox').append('HHHHHHHHHHHH');
    }
    $('#SelectNumbersBox').append('DDDDDDDDDD');
});

$('body').change(function(event){
    if( $('div.WinnerBanner').length > 0 ){
        $('#SelectNumbersBox').append('HHHHHHHHHHHH');
    }
    $('#SelectNumbersBox').append('DDDDDDDDDD');
});

问题原因&解决方案 #

你之前的代码有两个核心问题：

1. $(document).ready只在页面初始加载时执行一次，没法捕捉后续动态创建的.WinnerBanner；
2. 错误操作了#SelectNumbersBox容器，但目标是#LightBoxNumber。

下面给你几种可行的解决办法：

方法1：用DOM突变观察器（推荐）

监听#LightBoxNumber的子元素变化，一旦检测到.WinnerBanner被插入，立刻追加<span>：

$(function() {
    // 获取目标容器
    const lightBox = document.getElementById('LightBoxNumber');
    // 创建观察器实例
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            const $container = $(mutation.target);
            // 检查是否存在.WinnerBanner，且还没加过span
            if ($container.find('.WinnerBanner').length > 0 && !$container.find('span').length) {
                $container.append('<span></span>');
                // 完成后停止观察，避免重复触发
                observer.disconnect();
            }
        });
    });
    // 配置观察规则：监听子元素的添加/移除
    observer.observe(lightBox, { childList: true });
});

方法2：修改原生JS代码（最直接）

如果能改动那段插入.WinnerBanner的原生JS，直接在里面加上<span>是最高效的：

// 修改原原生代码
const lightBox = document.getElementById("LightBoxNumber");
lightBox.innerHTML = "<div class=\"WinnerBanner\">Congrats to all Winners!</div><span></span>";

方法3：定时轮询（兼容性备选）

如果没法用MutationObserver，也可以用定时检查的方式（性能稍差，但兼容性好）：

$(function() {
    const checkTimer = setInterval(function() {
        const $lightBox = $('#LightBoxNumber');
        // 满足条件就追加span并停止定时器
        if ($lightBox.find('.WinnerBanner').length > 0 && !$lightBox.find('span').length) {
            $lightBox.append('<span></span>');
            clearInterval(checkTimer);
        }
    }, 100); // 每100毫秒检查一次
});

内容的提问来源于stack exchange，提问作者James