Question

我有一个img标签，如

<img src="Mesothelioma_image_1.jpg"/>

我想用

之类的东西替换这个标签

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

保持相同的src属性值。

Answer 1

请参阅以下代码。

您需要使用父类或Id访问img。我已经在链接点击事件上完成了这项工作，您可以在document.ready或任何其他事件上执行此操作。

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>

Answer 2

您可以使用querySelector()查找图片。如果图像包含id属性会更容易。

然后，使用createElement()按名称amp-img创建dom元素。

使用setAttribute()为新元素分配属性，例如class，src，width，erc。

使用insertBefore()向网页添加新元素，remove()删除旧图片元素。

注意：我选择的是src旧图片，请根据需要进行更改。

＆＃13;

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

＆＃13;

<img src="Mesothelioma_image_1.jpg"/>

＆＃13;

如何使用JavaScript .replace（）方法替换<img/> HTML标记

2 个答案: