如何在所选的html元素旁边创建一个div元素

Question

以下标记是静态元素

<img src="http://www.jqueryscript.net/demo/Easy-Image-Morphing-Effect-with-jQuery-Canvas-morphing-js/img/pic.jpg" height="200" width="200" alt="">

我想动态围绕 img标签创建一个 div标签，如下所示

<div class="dycls">
  <img src="http://www.jqueryscript.net/demo/Easy-Image-Morphing-Effect-with-jQuery-Canvas-morphing-js/img/pic.jpg" height="200" width="200" alt="">
</div>

我尝试了以下代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js" type="text/javascript"></script>

  <img src="http://www.jqueryscript.net/demo/Easy-Image-Morphing-Effect-with-jQuery-Canvas-morphing-js/img/pic.jpg" height="200" width="200" >


<script>
$(document).ready(function(){
    $("img").prepend("<div class="dycls">");
    $("img").append("</div>");
});
</script>

Answer 1

使用.wrap

$(document).ready(function(){
    $("img").wrap('<div class="dycls" />');
});

使用prepend（）/ append（）不像字符串连接一样工作，也将传递的元素添加为调用元素的子元素

Answer 2

prepend/append在这种情况下不起作用。使用wrap()

  

围绕匹配元素集中的每个元素包装HTML结构。

var myEl = $('<div />').addClass('dycls');
$('img').wrap(myEl);