javascript - 根据IMG的ALT值插入HTML语句

Question

提前感谢您提供的任何帮助！

我有以下 HTML 代码：

<div class="ProductImage">
   <a href="URL LINK">
      <img src="IMAGE LINK" alt="BLAH BLAH - SALE!" />
   </a>
</div>
<div class="ProductImage">
   <a href="URL LINK">
      <img src="IMAGE LINK" alt="BLAH BLAH - BONUS!" />
   </a>
</div>

我想使用 Javascript 并在页面加载后找到 ProductImage 类的 DIV 内的所有图像实例，其中 ALT 值包含单词“SALE”，并按如下方式更改 HTML：

<div class="ProductImage">
   <a href="URL LINK">
      <img src="IMAGE LINK" alt="BLAH BLAH - SALE!" />
   </a>
   <img src="MY NEW SALE IMAGE LINK" class="MyClass" />  <!-- NEW inserted HTML statement -->
</div>
<div class="ProductImage">
   <a href="URL LINK">
      <img src="IMAGE LINK" alt="BLAH BLAH - BONUS!" />
   </a>
   <img src="MY NEW BONUS IMAGE LINK" class="MyClass" />  <!-- NEW inserted HTML statement -->
</div>

我被困在我的各种代码迭代中引用子节点和父节点......疯狂正在设置......

你能帮助这个（几乎疯了）初学者吗？

提前致谢！马库斯

Answer 1

尝试

var imgs = document.getElementsByTagName('img'), img, newImg;
var regex = /sale/i;
for(var i = 0; i < imgs.length; i++){
    img = imgs[i];
    if(regex.test(img.alt)){
        var parent = img.parentNode.parentNode;
        newImg = document.createElement('img');
        newImg.src='new-img';
        parent.appendChild(newImg)
    }
}

Answer 2

如果您可以/正在/将使用 jQuery，那么可以这样做：

jQuery('img[alt*="SALE"]').attr('alt', 'BLAH BLAH - SALE!');