0

I have a large table that one column contains e-mail addresses (+/- 60), and I was told to add an e-mail icon after each address. I have been trying to use anchors,.href and .indexof to select the e-mail links, but have gotten no where (hence no code).

Can I get assistance on how to add <img src="/a/path/email.jpg" alt="e-mail" /> if the link's href contains a mailto using vanilla JavaScript, no jQuery.

Ryan B
  • 3,364
  • 21
  • 35

3 Answers3

2

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'>";
      }
 }

See http://jsfiddle.net/adardesign/jJZCd/

Community
  • 1
  • 1
adardesign
  • 33,973
  • 15
  • 62
  • 84
  • I'll try this in a few, but is the semicolon aftfer the ( in the for loop a typo? – Ryan B Feb 04 '13 at 15:25
  • i am caching the variables to not pollute the global space http://stackoverflow.com/questions/8862665/what-does-it-mean-global-namespace-would-be-polluted – adardesign Feb 04 '13 at 15:28
  • @adardesign?? your fiddle is littered with global variables... I'm using an IIFE and thus not creating any global vars. Also, don't see the need for more than just three variables here. Lastly: your code is flawed: `if(href.indexOf('mailto:'))` will be false if the href value _starts with_ `mailto` => index: 0. If there is no `mailto`, then `indexOf` returns -1, which is a _truthy value_ – Elias Van Ootegem Feb 04 '13 at 15:36
  • @EliasVanOotegem, you are totally right, i forgot to wrap with the IIFE – adardesign Feb 04 '13 at 15:37
2

Here's a function you could use:

(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')));

You can, of course turn this IIFE into a regular function, to be called on the load event or something...
Forked @adardesign's fiddle, here it is

Elias Van Ootegem
  • 74,482
  • 9
  • 111
  • 149
  • is the opening `(` needed? I don't see where you close it. – Ryan B Feb 04 '13 at 15:35
  • @RyanB: The very last bracket closes it. The opening `(` can be replaced with a bitwise NOT: `~` or bang `!`. This turns the function _definition_ into an expression. Google more about IIFE's (Immediately Invoked Function Expression), they're great fun! BTW, I'm sorry to say, but the accepted answer has an error in it, check my last comment there – Elias Van Ootegem Feb 04 '13 at 15:41
  • Saw it, you added the () which cancelled the ) out, but I see you tweaked it. JSFiddle isn't working for me today. – Ryan B Feb 04 '13 at 15:46
  • @RyanB: It's dog-slow for me, too, but it's working. The fiddle I provided shows the link, and an img-not-found icon, so the code itself _is_ working. Just make sure that this code doesn't run prior to the links are loaded BTW (use it as the `window.onload` handler, or move this code to the bottom of the body and you're all right) – Elias Van Ootegem Feb 04 '13 at 15:54
0

You can use CSS to solve this problem

CSS

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

See http://jsfiddle.net/adardesign/QWsVM/

adardesign
  • 33,973
  • 15
  • 62
  • 84