javascript - .before()/.after() element without it closing automaticly -

this i'm trying do.

i calling on xml file , creating lot of div around content file. want add div around every 15 div. divs have class "item". items enclosed in div called "container".

i first try add open <div> in front of first div in container. sixteenth div , try add closing </div> , open <div> , try close last 1 adding closing </div> after lest "item"

$(".container .item:first-child").before('<div class="inner-container">');  $(".container  .item:nth-child(16)").before('</div><div class="inner-container">');  $(".container  .item:last-child").after('</div>'); 

my problem is div closed automatically appear empty divs rest of "item"s

i'm not sure if jquery thing or if browser doing it. can make work?

i'm doing because want scroll container left right.

something should work. take elements, , wrap 15 of them. take next 15 elements , wrap them. , on , on until there's no elements left.

var allelements = $('.container .item'),     wrap_by = 15; (var = 0; < allelements.length; += wrap_by) {     //first loop, elements 0 : 15, next loop elements 15:30 , on     allelements.slice(i, + wrap_by).wrapall('<div class="inner-container" />'); }