Insert tag <div> before and after tag <img>

Question

this my case

<p>
  <img src="myimage.jpg">
</p>

I would like to add tag before and after

end result:

<p>
  <div>
    <img src="myimage.jpg">
  </div>
</p>

this case custom by cms and I need to handle image size

Answer 1

You can use .wrap()

Wrap an HTML structure around each element in the set of matched elements.

 $('p > img').wrap('<div class="img_wrapper"></div>');

 .img_wrapper{ background: red; overflow: hidden; padding: 5px; width: 200px; height: 200px; }.img_wrapper > img{ width: 100%; height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> <img src="https://via.placeholder.com/150"> </p> <p> <img src="https://via.placeholder.com/100X200"> </p> <p> <img src="https://via.placeholder.com/150X300"> </p>

Answer 2

You can use .append() and .appendTo() methods as follows:

 $('<div/>').append($('img')).appendTo('p');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> <img src="myimage.jpg"> </p>