Adding and Removing Links

This Web technique is presented by BlueLinkWebs.com. If you think it's pretty neat, consider hiring us to help you. In any case, this technique is yours to use under the Creative Commons Attribution 3.0 United States License. Enjoy!

This page demonstrates how links can be turned on and turned off using JavaScript, in response to reader actions. You can use "view source" to see in context the JavaScript that does the job.

The problem:

A client wanted a Web page with links that could be turned on and off based on user input. In this case, the links were to college Web sites. When the page was loaded all sites were to be linked. The page also has form controls for areas of study, delivery mechanisms, schedules, and so on. As a user of the Web page set increasingly narrow criteria, names of colleges that did not meet the selection criteria were be be "unlinked." Since the client was a consortium of colleges, just setting display to hidden on the names was not acceptable; everyone wanted their name before potential students even if they didn't meet the students' needs as expressed at the moment.

We ruled out server-side technology based on considerations of response time. Potential students were expected to do "what-if" scenarios to see how changes in their criteria affected their choices of colleges. So, links had to be able to be turned back on as well as being removed, and response time had to be subsecond.

We solved this problem by using Document Object Model manipulation to insert and delete A elements as the form control elements were changed.

Demonstration:

The radio buttons call linkIt() or unLinkIt() depending upon the current state.

Here is a link to Bob Brown's page at Southern Polytechnic State U.

And here are controls for the link:     


Using the code:

To be unlinked successfully, a link must be enclosed in a <span id="xx"> tag, and the ID must be passed to unLinkIt. The <span> tag must contain the link element and its enclosed text, and nothing else. In particular, the text within the link may not itself contain markup. (Actually, it can, but you won't be able to re-link correctly it once you've unlinked it.) Here is an example:

   <span id="bb"><a href="http://www.spsu.edu/cs/faculty/bbrown">Bob Brown's</a></span>

Call unLinkIt with the text value of the ID of the <span> tag containing the link:

   unLinkIt('bb');

Call linkIt with the ID of the <span>, the URL of the link, and optionally, text for a title attribute; you do not need to supply the link text because it will be extracted from the contents of the <span> tag:

   linkIt('bb','http://www.spsu.edu/cs/faculty/bbrown','Brown\'s page');

The code:

<script type="text/javascript">
// unLinkIt and linkIt Copyright 2006 by Bob Brown and BlueLinkWebs.com; some rights reserved.
// Licensed under the Creative Commons Attribution License 2.5
// http://creativecommons.org/licenses/by/2.5/
function unLinkIt(id) {
  var target=document.getElementById(id);
  if (!target) {alert("Function 'unLinkIt' called with undefined ID="+id); return false;}
  // Make sure the first child node is really a link, type=A.
  // Otherwise, continuing could *really* mess things up...
  var theNode=target.firstChild.nodeName;
  if (theNode != 'A') {alert('Expected A, found node type: '+theNode); return false;}
  // Get and save the text within the link...
  var linkText=target.firstChild.firstChild.nodeValue;
  var textNode=document.createTextNode(linkText);
  // Replace the link (anchor) node with the newly-created text node...
  target.replaceChild(textNode, target.firstChild);
  return true;
} // function unLinkIt ends

function linkIt(id, url, title) {
  target=document.getElementById(id);
  if (!target) {alert("Function 'linkIt' called with undefined ID="+id); return false;}
   // Make sure the target node is really a span, type=SPAN.
  // Otherwise, continuing could *really* mess things up...
  theNode=target.nodeName;
  if (theNode != 'SPAN') {alert('Expected SPAN, found node type: '+theNode); return false;}
  // Get and save the text within the link...
  linkText=target.firstChild.nodeValue;
  var textNode=document.createTextNode(linkText);
  // Create a link (anchor) node with the text plus attribs from the param list.
  var newLink=document.createElement("a");
  if (!url) {alert("Call to linkIt with null URL."); return false;}
  newLink.setAttribute('href', url);
  if (title) newLink.setAttribute('title', title);
  newLink.appendChild(textNode);
  target.replaceChild(newLink, target.firstChild);
  return true;
} //  function linkIt ends
</script>

The code presented on this page is licensed under the Creative Commons Attribution 3.0 United States License. You are free to copy the work for commercial and non-commercial use, including use for profit. Each copy of the work must carry this notice: "Copyright 2006 by Bob Brown and BlueLinkWebs.com. Licensed under the Creative Commons Attribution 3.0 United States License. Some rights reserved." This notice may be placed as a comment in code, and need not appear on the displayed Web page.

Creative Commons license logo