jQuery before（）和after（）用于创建<div>容器，而不在after（）中插入结束标记

Question

我有2个容器，例如：

<div class="one col-md-6">container one</div>
<div class="two col-md-6">container two</div>

我想在例如之前和之后插入开始标签和结束标签

$( ".one" ).before( "<div class='row'>" );

$( ".two" ).after( "</div>" );

但是当我检查时，结果是

<div class="row"></div>

不是

<div class="row">
   <div class="one col-md-6">container one</div>
   <div class="two col-md-6">container two</div>
</div>

知道为什么吗？

Answer 1

在代码中的每个点，DOM结构都必须始终有效。调用.before之后，将为您 创建结束标签，因为否则，该结构将无效。

改为使用.wrapAll：

$(".one, .two").wrapAll("<div class='row'>");

console.log($('.row').html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one col-md-6">container one</div>
<div class="two col-md-6">container two</div>