在第一个孩子之前和之后插入带有javascript的html标签时，避免浏览器自动关闭标签

Question

I want to add before first .free-column DIV and after last .free-column DIV But browser auto-closes section tag

This is my code:

<div class="free-column">
    <article>
        article
    </article>
</div>
<div class="free-column">
    <article>
        article
    </article>
</div>
<article>
    column
</article>
<div class="free-column">
    <article>
        article
    </article>
</div>

<script type="text/javascript">
jQuery(function() {

    // this is OK
    jQuery("<section class='row container'>").insertBefore(".free-column:first");
    // this closing tag should appear at the bottom but browser auto-close it
    jQuery("</section>").insertAfter(".free-column:last");

    // just testing, this element appears at the end succesfully
    jQuery("<div class='test'>JS_test</div>").insertAfter(".free-column:last");

});
</script>

Answer 1

jQuery doesn't really let you manipulate opening/closing tags, rather the whole element at once.

You could try the wrapAll method, which wraps the selected elements inside a new element:

$(".free-column").wrapAll("<section class='row container' />");