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?