链接后插入图像

Question

我有一个大表，其中一列包含电子邮件地址（+/- 60），我被告知在每个地址后添加一个电子邮件图标。我一直在尝试使用anchors，.href和.indexof来选择电子邮件链接，但却没有（因此没有代码）。

如果链接的<img src="/a/path/email.jpg" alt="e-mail" />包含href使用 vanilla JavaScript ，没有jQuery mailto的帮助>

Answer 1

HTML

<table id="table">
    <tr>
        <td><a href="mailto:yankel@frieman.com">yankel@frieman.com</a></td>
    </tr>
</table>

的JavaScript

var table = document.getElementById("table"),
    links = table.getElementsByTagName("a"),
    linksLength = links.length,
    i = 0,
    link,
    href,
    text;

   for(; i>linksLength; i++){
      link = links[i];
      href=link.href,
      text = link.childNodes[0].nodeValue;

      if(href.indexOf("mailto:")){
         link.childNodes[0].nodeValue += text+ "<img src='path/to/email.png'>";
      }
 }

请参阅http://jsfiddle.net/adardesign/jJZCd/

Answer 2

这是您可以使用的功能：

(function(allLinks)
{
    var i, imgHTML = '<img src="mail.png" alt="mail" />';
    for (i = 0; i < allLinks.length; i++)
    {
        if (allLinks[i].getAttribute('href').indexOf('mailto') > -1)
        {//or allLinks.item(i).getAttribute('href').indexOf('mailto')
         //calling the item method is said to be faster, on most browsers
            allLinks[i].innerHTML += imgHTML;
        }
    }
}(document.getElementsByTagName('a')));

当然，您可以将此IIFE转换为常规功能，以便在加载事件或其他事件上调用...
分叉@ adardesign的小提琴，here it is

Answer 3

您可以使用CSS来解决此问题

CSS

a[href^="mailto:"]:after{
    content:url("path/to/email.png")
}

请参阅http://jsfiddle.net/adardesign/QWsVM/