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>