How to wrap an existing element with another one in jQuery?

Question

How can I create a <div> surrounding an existing <div>.

My code is as follows:

<div id="test">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>
<div id="test2">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>

<script>
  $("#test").before('<div class="test3">');
  $("#test2").after('</div>');
</script>

But it seems that it cannot insert a <div> without an end tag. So how to achieve that?

Answer 1

Use the .wrapAll() ^doc method

$('#test, #test2').wrapAll('<div class="test3">');