JQuery replaceWith one HTML tag with another

Question

I have a img tab as below:

  <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

I use .replaceWith() $(this).replaceWith("<div>" + $(this).html() + "</div>"); and expect a code like below:

  <div class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" </div>

But somehow I got:

<div></div>

Please take a look at my code:

 $('img').each(function() { $(this).replaceWith("<div>" + $(this).html() + "</div>"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

Answer 1

DOM NODE REPLACEMENT APPROACH:

With vanilla JavaScript, you can just use the outerHTML() attribute to retrieve the element as a string and just replace "img" with "div" using the replace() method and then replace the <img> element with your <div> in your DOM (not really sure why since div can't really utilise the src attribute) by just converting your current retrieved string assigned to the div variable to a DOM Node using the createContextualFragment() and then using the replaceNode() method to replace the img node with the div node in your DOM.

Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:

 const img = document.querySelector("img"); const div = img.outerHTML.replace("img", "div"); let newDiv = document.createRange().createContextualFragment(div); img.parentNode.replaceChild(newDiv, img);

 <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

NB You will have to inspect the Code Snippet sandbox or the JSFiddle sandbox to see the <img/> element replaced with the <div> element.

---

CLONING ATTRIBUTES APPROACH:

Another way to do this (got this idea from Barmar's jQuery solution above) would be to create a new div element and just cloning the attributes from the <img> element to the new <div> element using the attributes property and setAttributes() method like this:

 const img = document.querySelector("img"); const newDiv = document.createElement("div"); [...img.attributes].forEach(({name, value}) => newDiv.setAttribute(name, value) ); img.parentNode.replaceChild(newDiv, img);

 <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

NB Again, you will have to inspect the Code Snippet sandbox or the JSFiddle sandbox to see the <img/> element replaced with the <div> element.

Answer 2

try with this

    $('img').each(function() {
            $(this).replaceWith("<div with="100px"> + $(this).html() + "</div>"); 
});

you should set attribute width to visualize a div.

Answer 3

You can't use .html() to get the HTML of the element itself. And even if you could, since you're putting the HTML between <div> and </div> , it would nest the image inside the DIV (like .wrap() does) rather than put the image attributes into the DIV itself.

You'll need to create the DIV element and copy the attributes to it.

 $('img').replaceWith(function() { return $("<div>", { "class": $(this).attr("class"), css: { "background-image": `url(${$(this).attr("src")})` } }); });

 div.media-1200px { width: 1200px; height: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">