JQuery layer append tag at the bottom instead of surround it's items

Question

I'm trying to surround all items inside the main-panel with a div but the div is just appended at the bottom of the class

I've yet tryed to use the following code but the result is that the div main-panel items are not surrounded by div close layer but it just appended it to the bottom as you can see on the screen

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

I would be able to surround item inside the main-panel div.

Answer 1

Using .wrap() is normally the best way to wrap elements using jQuery:

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

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

Answer 2

use 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> 

Answer 3

You may want to use the appendTo function (which adds to the end of the element):

$("#source").appendTo("#destination");

Example

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

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