SCR30Usar scripts para cambiar el texto de los enlaces

Este ejemplo usa JavaScript para añadir información contextual directamente al texto de un enlace. La clase del enlace se utiliza para determinar qué texto adicional debe añadirse. Cuando se activa el enlace «Expand Links» (ampliar enlaces), se examina cada enlace de la página para ver si debe añadírsele texto adicional.

...
<script>
  var expanded = false;
  var linkContext = {
    "hist":" version of The History of the Web",
    "cook":" version of Cooking for Nerds"
  };
  function doExpand() {
    var links = document.links;
    for (var i=0; i<links.length; i++) {
      var link = links[i];
      var cn = link.className;
      if (linkContext[cn]) {
        span = link.appendChild(document.createElement("span"));
        span.setAttribute("class", "linkexpansion");
        span.appendChild(document.createTextNode(linkContext[cn]));
      }
    }
    objUpdate = document.getElementById('expand');
    if (objUpdate) {
      objUpdate.childNodes[0].nodeValue = "Collapse links";
    }
    expanded = true;
  }
  function doCollapse() {
    objUpdate = document.getElementById('expand');
    var spans = document.getElementsByTagName("span");
    var span;
    // go backwards through the set as removing from the front changes indices
    // and messes up the process
    for (i = spans.length - 1; i >= 0; i--) {
      span = spans[i];
      if (span.getAttribute("class") == "linkexpansion")
        span.parentNode.removeChild(span);
      }
      if (objUpdate) {
      objUpdate.childNodes[0].nodeValue = "Expand links";
    }
    expanded = false;
  }
  function toggle() {
    if (expanded) doCollapse();
    else doExpand();
  }
</script>
...
<h1>Books for download</h1>
<p><button id="expand" onclick="toggle(); type="button">Expand Links</button></p>
<ul>
  <li>The History of the Web:
    <a href="history.docx" class="hist">Word</a>, 
    <a href="history.pdf" class="hist">PDF</a>, 
    <a href="history.html" class="hist">HTML</a>
  </li>
  <li>Cooking for Nerds: 
    <a href="history.docx" class="cook">Word</a>, 
    <a href="history.pdf" class="cook">PDF</a>, 
    <a href="history.html" class="cook">HTML</a>
  </li>
</ul>
...

Ejemplo funcional de este código: Providing link expansions on demand (ampliar los enlaces a petición).