.before()/.after() element without it closing automaticly
<p>This is what I'm trying to do.</p>

<p>I am calling on a xml file and creating alto of div around the content from the file. What I want to do is to add a div around every 15 div. The divs have the class "item". The items are enclosed in a div called "container".</p>

<p>I first try to add a open <code>&lt;div&gt;</code> in front of the first div in the container. Then I look for the sixteenth div and try to add a closing <code>&lt;/div&gt;</code> and then I open another <code>&lt;div&gt;</code> and then I try to close the last one by adding a closing <code>&lt;/div&gt;</code> after the lest "item"</p>

<pre><code>$(".container .item:first-child").before('&lt;div class="inner-container"&gt;');

$(".container  .item:nth-child(16)").before('&lt;/div&gt;&lt;div class="inner-container"&gt;');

$(".container  .item:last-child").after('&lt;/div&gt;');
</code></pre>

<p>My problem is is that the div are closed automatically so the appear as an empty divs with the rest of the "item"s</p>

<p>I'm not sure if this is a jquery thing ore if the browser is doing it. But what can I do to make this work?</p>

<p>I'm doing this because I want to scroll the container from left to right.</p>
