SCR26Insertar contenido dinámico en el Document Object Model inmediatamente después del elemento que lo activa

Este ejemplo crea un menú cuando se hace clic en un enlace y lo inserta después del enlace. El evento onclick del enlace se usa para llamar al script ShowHide, pasándole como parámetro un id para el nuevo menú.

<button aria-expanded="false" type="button" onclick="ShowHide('foo',this)">
  Toggle
</button>

El script ShowHide crea un div que contiene el nuevo menú e inserta un enlace dentro de él. La última línea es el núcleo del script. Localiza el elemento padre del elemento que desencadenó el script y le añade como nuevo hijo el div que ha creado. Esto hace que el nuevo div quede en el DOM después del menú. Cuando el usuario pulsa la tecla de tabulación, el foco pasará al primer elemento del menú que pueda recibirlo: el enlace que hemos creado.

function ShowHide(id,src){
  var el = document.getElementById(id);
  if (!el){
    el = document.createElement("div");
    el.id = id;
    var link = document.createElement("a");
    link.href = "/laptops";
    link.appendChild(document.createTextNode("Laptops"));
    el.appendChild(link);
    src.parentElement.appendChild(el);
    src.setAttribute("aria-controls", id);
    src.setAttribute("aria-expanded", "true");
   }
   else if (el && src.getAttribute("aria-expanded") === "false"){
     el.style.display = 'block';
     src.setAttribute("aria-expanded", "true");
   }
   else{
     el.style.display = 'none';
     src.setAttribute("aria-expanded", "false");    
   }   
}

Se usa CSS para dar al div y al enlace el aspecto de un menú.