title: How to wrap an existing element with another one in jQuery?
body: <p>How can I create a <code>&lt;div&gt;</code> surrounding an existing <code>&lt;div&gt;</code>.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;div id="test"&gt;
    &lt;h2&gt;Greetings&lt;/h2&gt;
    &lt;p&gt;Test&lt;/p&gt;
    &lt;div class="inner"&gt;Hello&lt;/div&gt;
    &lt;p&gt;Test&lt;/p&gt;
    &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="test2"&gt;
    &lt;h2&gt;Greetings&lt;/h2&gt;
    &lt;p&gt;Test&lt;/p&gt;
    &lt;div class="inner"&gt;Hello&lt;/div&gt;
    &lt;p&gt;Test&lt;/p&gt;
    &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    $("#test").before('&lt;div class="test3"&gt;');
    $("#test2").after('&lt;/div&gt;');
  &lt;/script&gt;
  </code></pre>
  
  <p>But it seems that it cannot insert a <code>&lt;div&gt;</code> without an end tag. So how to achieve that?</p>