CODEWITHSUNDEEP
javascriptjqueryhtml
NiceToMytyuk
NiceToMytyuk

Reputation: 4277

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

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

enter image description here

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.

Upvotes: 0

Views: 55

Answers (3)

eborrallo
eborrallo

Reputation: 750

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>

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

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>

Upvotes: 1

OliverRadini
OliverRadini

Reputation: 6466

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>

Upvotes: 1

Related Questions