Insertar donde yo quiera con DOM

[derkenuke]

Me queda una duda. Vale, para insertar un nodo antes, insertBefore. Para insertarlo despues?

Buscaba un insertAfter.. y lo encontre por google:

Código PHP:

  function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
} 
   

Asi ya queda mi ejemplo completo por fin!:

Código PHP:

  <a href="a.htm">enlace</a> texto texto texto 
<a href="s.html">otro enlace</a> mas texto 
<a href="i.htm">y otro</a> y se acaba aqui. 
 
<script> 
 
function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
}
 
var As=document.getElementsByTagName("A"); 
var corchete1,corchete2;
for(var a=0;a<As.length;a++) { 
    As[a].onmouseover=function() { 
        corchete1=document.createTextNode("[");
        corchete2=document.createTextNode("]");
        this.parentNode.insertBefore( corchete1 , this);
        insertAfter( this.parentNode, corchete2, this );
    } 
    As[a].onmouseout=function() { 
        corchete1.removeNode();
        corchete2.removeNode();
    } 
}
 
</script> 
  

Y si lo hacemos más estético:

Código PHP:

  <head>
 
<style>
.corchetes {
    color: #000; 
    text-decoration:none; 
    width:3px; 
    visibility:hidden; 
    display:inline;
}
</style>
 
</head>
 
<body>
 
 
<a href="a.htm">enlace</a> texto texto texto 
<a href="s.html">otro enlace</a> mas texto 
<a href="i.htm">y otro</a> y se acaba aqui. 
 
<script> 
 
function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
}
 
var As=document.getElementsByTagName("A"); 
var corchete1,corchete2;
for(var a=0;a<As.length;a++) {
    corchete1=document.createElement("DIV");
    corchete2=document.createElement("DIV");
    corchete1.appendChild( document.createTextNode("[") );
    corchete2.appendChild( document.createTextNode("]") );
    corchete1.className=corchete2.className="corchetes";
    As[a].parentNode.insertBefore( corchete1 , As[a] );
    insertAfter( As[a].parentNode, corchete2, As[a] );
    As[a].onmouseover=function() { 
        this.previousSibling.style.visibility="visible";
        this.nextSibling.style.visibility="visible";
    }
    As[a].onmouseout=function() { 
        this.previousSibling.style.visibility="hidden";
        this.nextSibling.style.visibility="hidden";
    }
}
 
</script>
 
 
</body> 
  

Ya tenemos sustituto para

Código:

a:hover:before {content: "["}
a:hover:after{content:"]"}

sobre IE...


Una ultima pijada poniendome tiquismiquis. Si el enlace tiene texto alrededor, nos podemos dar cuenta que antes y despues del enlace hay como doble espaciado. esto es por que se junta el espacio y el div oculto.

No es que quede feo, ya es solo por curiosidad. ¿Se podria eliminar el espacio (si existiera) de antes y despues de todos los enlaces?