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