javascript - JQuery 层在底部附加标签而不是包围它的项目

Question

我试图用 div 包围主面板内的所有项目，但 div 只是附加在类的底部

我还尝试使用以下代码，但结果是 div 主面板项目没有被 div 关闭层包围，但它只是将其附加到底部，正如您在屏幕上看到的那样

main_panel_height = $('.main-panel')[0].scrollHeight;
                $layer = $('<div class="close-layer"></div>');
                $layer.css('height', main_panel_height + 'px');
                $layer.appendTo(".main-panel");

我可以将项目包围在主面板 div 内。

Answer 1

使用wrapInner

main_panel_height = $('.main-panel')[0].scrollHeight;
$layer = $('<div class="close-layer"></div>');
$layer.css('height', main_panel_height + 'px');
$('.main-panel').wrapInner($layer);

.close-layer {color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="main-panel">main panel</div>