title: avoid browser auto close tag when inserting html tag with javascript before first-child and after
body: <p>I want to add  before first .free-column DIV and  after last .free-column DIV
  But browser auto-closes section tag</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;div class="free-column"&gt;
      &lt;article&gt;
          article
      &lt;/article&gt;
  &lt;/div&gt;
  &lt;div class="free-column"&gt;
      &lt;article&gt;
          article
      &lt;/article&gt;
  &lt;/div&gt;
  &lt;article&gt;
      column
  &lt;/article&gt;
  &lt;div class="free-column"&gt;
      &lt;article&gt;
          article
      &lt;/article&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  jQuery(function() {
  
      // this is OK
      jQuery("&lt;section class='row container'&gt;").insertBefore(".free-column:first");
      // this closing tag should appear at the bottom but browser auto-close it
      jQuery("&lt;/section&gt;").insertAfter(".free-column:last");
  
      // just testing, this element appears at the end succesfully
      jQuery("&lt;div class='test'&gt;JS_test&lt;/div&gt;").insertAfter(".free-column:last");
  
  });
  &lt;/script&gt;
  </code></pre>