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

Question

我想在第一个.free-column DIV之前和之后的.free-column DIV之后添加 但浏览器会自动关闭部分标记

这是我的代码：

<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实际上并不允许你操纵开/关标签，而是一次操纵整个元素。

您可以尝试wrapAll方法，该方法将所选元素包装在新元素中：

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