如何在选定的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()不像字符串连接那样工作，它们还将传递的元素添加为调用元素的子元素