In my ongoing quest for new techniques, I have recently been reading up on DOM scripting, which allows HTML coding to be dynamically inserted into a web page. This script is the first result of my efforts to learn this technique.

This script was designed to protect your website - to stop spammers by not allowing their robots to "see" your 'mailto:' link. You can easily hide your email address by using this script, since it will be stored off-page. On the webpage where the script is used, nothing is visible in the HTML, other than an empty <span> element. The email address of the link will not show up even when you "View Source".

 1 function mailTo()
 2 {  
 3  if (!document.getElementById("mailTo")) return false;
 4  var spanobj = document.getElementById("mailTo");
 5  var anch = document.createElement("a");
 6  var email = "recipient@website.com";
 7  var mailto = "mailto:" + email;
 8  anch.setAttribute("href",mailto);
 9  spanobj.appendChild(anch);
10  var txt = document.createTextNode(email);
11  anch.appendChild(txt);
12  return true;
13 }

Brief explanation:   Providing a tutorial on DOM scripting [1] is beyond the scope of this snippet. Just a few observations:

Line #3 prevents the script from trying to run if there is no tag in your HTML with an id = "mailTo", or if the browser is so old that it does not understand DOM methods.

Line #4 locates where you want to insert your link, and lines #5-#11 create the code and insert it into your webpage.

How to use the script:

1) To effectively hide your website address from robots, the script cannot be located on your webpage. Just follow the instructions on the main Snippets Page for how to install an off-page javascript function that runs at load time.

2) Put the following code in your webpage wherever you want the link to appear:

<span id="mailTo"></span>

Caveat:  This script does not degrade gracefully. If a user has javascript disabled, the link will not be visible or useable. This will not be a problem for the majority of users, since javascript is finally beginning to lose its undeserved bad reputation. In any case, the script is a definite improvement over the other scripts I have seen that leave the components of the email address right in the source code.

I would, however, strongly urge that you have another way for users to reach you, such as a "Contact Page". There are security issues with using forms as well, but that is the topic of another snippet.

See it in action:  Notice the email link at the bottom of this page. Now right-click anywhere on this page, and select "View (Page) Source". Search the source code, until you find class="mailTo". Notice that the email address that you see on the page itself cannot be found anywhere in the source code.

Update ( Nov 19, 2009 ):  As I was reviewing this page, I noticed that this mailTo script is not the latest version. In 2007, I revised the script so that it's possible to have more than one email link on a page. 'Class' is used instead of 'id'. If you would prefer using this new version, I will be glad to send you a copy.

[1] I highly recommend this excellent book by Jeremy Keith: DOM Scripting - Web Design with Javascript and the Document Object Model .

Snippet Menu

• Alert Box - Email
  Form Field Required
• Table Rows with
  Alternating Colors
• Track Hits from
  Your Backlinks
• Protect your MailTo
  Link from Spammers
• Overlay Box
  Instead of Popups
• Form Submission
  No Double-Click
• Change Dates
  Automatically
• Is it Standard
  or Daylight Time?
• Same Window
  or New Window?

Related Sites

• David Broadhead, Ph.D., EzineArticles Expert Author
• Hide Your Website Email Address from Spam Bots

• Home
• Code Snippets
• Tutorials
• Articles
• Resources
  • HTML & CSS
  • Javascript
  • Perl
  • Tools
  • Other
• Contact