title: Adding wrapping tags before and after a specified tag
body: <p>I've recently started a course on jQuery and wondered what's going wrong with my code. I want to add an opening li before each "wcprow" div and closing the li after the closing div... So it looks like:</p>
  
  <pre><code>&lt;li&gt;
  &lt;div class="wcprow"&gt;
      Content
  &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>My current HTML is</p>
  
  <pre><code>&lt;ul&gt;
  
  &lt;div class="wcprow"&gt;
      Content
  &lt;/div&gt;
  
  &lt;div class="wcprow"&gt;
      Content
  &lt;/div&gt;
  
  &lt;div class="wcprow"&gt;
      Content
  &lt;/div&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>And jQuery:</p>
  
  <pre><code>$('.wcprow').before("&lt;li&gt;"); $('.wcprow').after("&lt;/li&gt;");
  </code></pre>
  
  <p><a href="https://jsfiddle.net/7313ezjh/" rel="nofollow noreferrer">Fiddle Here</a></p>
  
  <p>When I view via dev tools, it outputs a closing li directly after the opening one. Which is not what I want.</p>
  
  <pre><code>&lt;li&gt;&lt;/li&gt;&lt;div class="wcprow"&gt;
      Content
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm at the start of this course and might stumble on the answer later on... But wondered if anyone can give me any pointers so I'm not thinking about it too much.</p>