How to replace an <img/> HTML tag using JavaScript .replace() method

Question

I have a img tag like

<img src="Mesothelioma_image_1.jpg"/>

I want to replace this tag with something like

<amp-img class="blog-image" src="Mesothelioma_image_1.jpg" width="50" height= "20" layout="responsive"></amp-img>

By keeping the same src attribute value.

Is this the same problem as the one on this thread maybe? stackoverflow.com/q/13389751/6124074 — Jakob Pålsson
– Jakob Pålsson, Commented Jul 12, 2017 at 12:23
Hopefully you are doing this in the backend and not on the frontend. — epascarello
– epascarello, Commented Jul 12, 2017 at 12:26
@epascarello this could be done in the frontend without a problem. Angular and other frameworks does this successfully. — Jakob Pålsson
– Jakob Pålsson, Commented Jul 12, 2017 at 12:33

Hassan Imam · Accepted Answer · 2017-07-13 18:26:51Z

You can use querySelector() to find the image. It would be easier if the image contains an id attribute.

Then, use createElement() to create the dom element by name amp-img.

Use setAttribute() to assign attributes to the new elements such as class, src, width, erc.

Use insertBefore() to add new element to the page and remove() to remove the old image element.

NOTE: I am selecting the old image with its src, please change it as per your need.

var oldImage = document.querySelector('img[src="Mesothelioma_image_1.jpg"]');

var newImage = document.createElement('amp-img');
newImage.setAttribute("class","blog-image");
newImage.setAttribute("src", oldImage.getAttribute('src'));
newImage.setAttribute("width","50");
newImage.setAttribute("height","20");
newImage.setAttribute("layout","responsive");
oldImage.parentNode.insertBefore(newImage, oldImage);
oldImage.parentNode.removeChild(oldImage);

console.log(document.querySelector('amp-img[src="Mesothelioma_image_1.jpg"]')); // to find the appended new image

<img src="Mesothelioma_image_1.jpg"/>

Sajid Manzoor · Accepted Answer · 2017-07-12 12:34:18Z

0

Please see below code.

You will need to access img using parent class or Id. i have did this work on a link click event, You can do this on document.ready or any other event as well.

jQuery('.clickMe').click(
function(e){
    e.preventDefault();
    var img = jQuery('.parent img').attr('src');  
    var newhtml='<amp-img class="blog-image" src="'+img+'" width="50" height= "20" layout="responsive"></amp-img>';
  // console.log('IMG: '+ img);
  
  jQuery('.parent').html(newhtml);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <img src="https://mosthdwallpapers.com/wp-content/uploads/2016/08/Pakistan-Flag-Image-Free-Download.jpg"/>
</div>
<a class="clickMe" href="#">Click Me </a>

<amp-img class="blog-image" src="Mesothelioma_image_1.jpg" width="50" height= "20" layout="responsive"></amp-img>

answered Jul 12, 2017 at 12:34

Sajid Manzoor

1,43814 silver badges21 bronze badges

2 Comments

Jakob Pålsson Over a year ago

He does not need to access it using a parent class or id. Look at my comment on the question.

Sajid Manzoor Over a year ago

remove .parent from this line var img = jQuery('.parent img').attr('src');

Collectives™ on Stack Overflow

How to replace an <img/> HTML tag using JavaScript .replace() method

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related