jQuery如何将目标div detach后追加到对应父容器的指定div中

你当前代码无法实现预期效果，主要存在两个逻辑缺陷：

• 无作用域的全局选择器引发匹配错位：原代码直接全局查找.variations_form.wvs-archive-variation-wrapper和.product-variations，在商品归档类存在多块重复结构的页面，会把页面上所有的变体表单元素统一抓取，再批量追加到每一个匹配的目标容器中，最终出现内容堆叠、位置偏移的问题，和「单块内部独立移动元素」的预期逻辑不符。
• 执行时机不匹配：你使用的WooCommerce WVS变体插件的表单属于动态渲染元素，在DOM初始加载完成时，目标元素可能还未完成初始化，导致移动操作无法拿到完整的、可正常交互的元素实例。

jQuery(function($){
    // DOM就绪后先执行一次元素移动
    moveVariationForm();
    // 兜底监听插件动态渲染完成的事件，适配异步加载的场景
    $(document).on('wvs_archive_variation_loaded', moveVariationForm);

    function moveVariationForm(){
        // 遍历每一个独立的商品内容块，仅在块内部做元素匹配
        $('.pp-content-post').each(function(){
            const $contentBlock = $(this);
            // 在当前块内部查找需要移动的源变体表单
            const $variationForm = $contentBlock.find('.variations_form.wvs-archive-variation-wrapper');
            // 在当前块内部查找需要追加到的目标容器
            const $targetContainer = $contentBlock.find('.product-variations');

            // 确认两个元素都存在时再执行移动，避免空操作报错
            if($variationForm.length && $targetContainer.length){
                // 直接detach后追加，会完整保留元素原有的交互事件
                $variationForm.detach().appendTo($targetContainer);
            }
        })
    }
})

该实现的核心改动是把原来的全局元素查找，调整为「所属父容器内部匹配源元素和目标元素」，从根源上避免多块结构下的元素错配；同时通过插件的渲染完成事件做兜底，适配动态加载的场景。移动完成后变体表单的原有交互逻辑不会被破坏，不需要额外重新初始化表单事件。

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