I am trying to replace img tag with picture tag in editor.

Editor adding url like : <img src="http://localhost/news/uploads/large/6dBUlfZZBW.webp">

How can I change this :

success: function(url) {
   var image = $('<img>').attr('src','http://' +url);
   $('#summernote').summernote("insertNode", image[0]);
}

To This :

<picture>
  <source media="(min-width: 400px)" srcset="uploads/large/JS60y3eMKG.webp" type="image/webp">
  <source media="(max-width: 300px)" srcset="uploads/medium/JS60y3eMKG.webp" type="image/webp">
  <source media="(max-width: 200px)" srcset="uploads/small/JS60y3eMKG.webp" type="image/webp">
  <img src="uploads/small/JS60y3eMKG.webp" alt="test" width="200" height="200">
</picture> 

Note: all images has same names but different folders.