Jquery 包装元素，然后在其中附加另一个元素

看看这个代码

<div class="preview">
    <img src="link" alt="" class="overlay" />
</div>

我需要做的是将内部div调用“overlay”包装起来，然后附加另一个名为“overlay2”的div，如下所示

<div class="preview">
    <div class="overlay">
        <img src="link" alt="" class="overlay" />
        <div class="overlay2"></div>
    </div>
</div>

我尝试使用.wrap和append，但我不知道如何在一个命令中使用它；

var imgElement = $('div.preview').find('.overlay');  
$('div.preview').remove('img.overlay');    
$('div.preview').append("<div class='overlay'></div>");    
$('div.overlay').append(imgElement);  
$('img.overlay').after("<div class='overlay2'></div>");

$（'div.preview'）。删除（'img.overlay'）； $（'div.preview'）。追加（“”）； $（'div.overlay'）.append（imgElement）； $（'img.overlay'）。在（“”）之后； 非常简单

$('.preview').append('<div class="overlay2"></div>')
$('.overlay').wrap('<div class="overlay"></div>')

$（'.preview'）。追加（“”）
$（'.overlay'）.wrap（''）

在这里测试：

您可以试试这个

$('div.preview img')
.wrap('<div class="overlay"></div>')
.after('<div class="overlay2"></div>');

$（“div.preview img”）
.wrap（“”）
.在（''）之后；

（见资料来源）

或

$（“div.preview img”）
.wrap（$（''，{'class'：'overlay'}））
。在（$（''，{'class'：'overlay2'}）之后；

（见资料来源）

输出

需要对

append（）

调用中的

'overlay'

单引号进行转义。只需阅读wrap函数。这是一个比我提到的更好的办法。第二行应该是

$（'.overlay'）.wrap（''）-不应该包括“叠加”文本你在开玩笑吧？因为如果你点击我的JSFIDLE，你也会看到我已经给所有的div上色了，OP并没有要求这样做。我应该删除我的答案吗？不，你的原始答案（）包含文本“overlay”，它与问题中的预期输出不匹配。你显然同意，因为现在看起来不错：）
$('div.preview img')
.wrap($('<div/>', {'class':'overlay'}))
.after($('<div/>', {'class':'overlay2'}));

<div class="preview">
    <div class="overlay">
        <img src="link" alt="" class="overlay">
        <div class="overlay2"></div>
    </div>
</div>