title: Add a parent to several <li> tags
body: <p>So I have a code like this:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li class='item-1'&gt;...&lt;/li&gt;
   &lt;li class='item-2'&gt;...&lt;/li&gt;
   &lt;li class='item-3'&gt;...&lt;/li&gt;
   &lt;li class='item-4'&gt;...&lt;/li&gt;
   &lt;li class='item-5'&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to wrap <code>.item-2, .item-3, .item-4</code> into a parent with class <code>.container</code> using JS or jQuery, so the code becomes like this:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li class='item-1'&gt;...&lt;/li&gt;
   &lt;div class='container'&gt;
    &lt;li class='item-2'&gt;...&lt;/li&gt;
    &lt;li class='item-3'&gt;...&lt;/li&gt;
    &lt;li class='item-4'&gt;...&lt;/li&gt;
   &lt;/div&gt;
   &lt;li class='item-5'&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How to do it? What I've tried so far:</p>
  
  <pre><code>$(".item-2").before("&lt;div class='container'&gt;");
  $(".item-4").after("&lt;/div&gt;");
  </code></pre>
  
  <p>But the result is:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li class='item-1'&gt;...&lt;/li&gt;
   &lt;div class='container'&gt;&lt;/div&gt;
   &lt;li class='item-2'&gt;...&lt;/li&gt;
   &lt;li class='item-3'&gt;...&lt;/li&gt;
   &lt;li class='item-4'&gt;...&lt;/li&gt;
   &lt;li class='item-5'&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>