Insertar donde yo quiera con DOM

derkenuke · #1 (**permalink**) 03/09/2005, 09:10

Al insertar un nuevo elemento con DOM me encuentro con una limitacion muy grande. Con .appendChild() solo puedo meter elementos al final de la etiqueta, no donde yo quiera.

Cómo podriamos, por ejemplo, insertar una imagencilla a la derecha de un link cuando pasamos el raton sobre el? No se me ocurre, solo sé ponerla al final del parrafo, y yo la quiero justo al lado del link.

JavierB · #2 (**permalink**) 03/09/2005, 09:50

Hola derkenuke

En lugar de .appendChild tienes que usar .insertBefore. Un pequeño ejemplo:

Código PHP:

  <p id="pru"><a href="#" onmouseover="inserta()">Enlace</a> 
<span id="in">Texto</span></p>

Código PHP:

  function inserta() { 
  obj = document.getElementById('in'); 
  ele = document.createElement('img'); 
  ele.src='imagen1.gif'; 
  document.getElementById('pru').insertBefore(ele,obj); 
}

Espero que te sirva. Saludos,

derkenuke · #3 (**permalink**) 03/09/2005, 10:31

Ok Javier, esa era la clave.

Gracias!

caricatos · #4 (**permalink**) 03/09/2005, 11:10

Hola:

Solo una pequeña apreciación:

Usando parentNode tan solo necesitamos el nodo donde queremos poner el objeto antes:

Esta línea:
document.getElementById('pru').insertBefore(ele, obj);
... podría ser:
obj.parentNode.insertBefore(ele, obj);

... y si quisiéramos que siempre se insertase como primer hijo de un nodo (ejemplo "contenedor"), podemos usar el método hasChildNodes() y el firstChild:

var contenedor = document.getElementById("contenedor");
if (contenedor.hasChildNodes())
contenedor.insertBefore(ele, contenedor.firstChild)
else
contenedor.appendChild(ele)

Hay más cosas del DOM muy interesantes...

Saludos

derkenuke · #5 (**permalink**) 03/09/2005, 11:43

De acuerdo caricatos, memorizado

derkenuke · #6 (**permalink**) 03/09/2005, 12:20

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?

JavierB · #7 (**permalink**) 03/09/2005, 12:43

Hola de nuevo.

A ver que tal estas modificaciones:

Código PHP:

  for(var a=0;a<As.length;a++) { 
    if (As[a].previousSibling) { 
      txt = As[a].previousSibling.nodeValue; 
      txt = txt.substr(0,txt.length-1); 
      As[a].previousSibling.nodeValue = txt; 
    } 
    if (As[a].nextSibling) { 
      txt = As[a].nextSibling.nodeValue; 
      txt = txt.substr(1,txt.length); 
      As[a].nextSibling.nodeValue = txt; 
    } 
    corchete1=document.createElement("DIV"); 
    corchete2=document.createElement("DIV");

Saludos,

derkenuke · #8 (**permalink**) 03/09/2005, 13:03

Lo has clavao Javier!

Bueno, ya lo tenemos en las faq. FAQ#227 (cuántos hay ya no? Parece una biblioteca mas que un FAQ xD).

Pongo el codigo final tambien aqui:

Código PHP:

  <html> 
 
<head> 
 
<style> 
.corchetes { 
    color: #f93;  
    font-weight:bold; 
    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>  
 
// necesitaba dos funciones, el insertBefore que ya existe, y el insertAfter que nos lo sacamos de la manga 
function insertAfter(parent, node, referenceNode) { 
    parent.insertBefore(node, referenceNode.nextSibling); 
} 
 
// la coleccion de <a> (anchors) 
var As=document.getElementsByTagName("A");  
var corchete1,corchete2; 
 
//por cada enlace 
for(var a=0;a<As.length;a++) { 
 
    //quitamos los espacios anteriores y posteriores a los enlaces, que si no con el corchete oculto parecera doble espaciado 
    var anterior = As[a].previousSibling; 
    if(anterior!=null) { 
        anterior.nodeValue  = anterior.nodeValue.substr(0,anterior.nodeValue.length-1);  
    } 
    var siguiente = As[a].nextSibling; 
    if(siguiente!=null) { 
        siguiente.nodeValue = siguiente.nodeValue.substr(1); 
    } 
     
    //creamos los corchetes, y les aplicamos el estilo "corchetes" 
    corchete1=document.createElement("DIV"); 
    corchete2=document.createElement("DIV"); 
    corchete1.appendChild( document.createTextNode("[") ); 
    corchete2.appendChild( document.createTextNode("]") ); 
    corchete1.className=corchete2.className="corchetes"; 
     
    //insertamos los corchetes antes y despues del enlace 
    As[a].parentNode.insertBefore( corchete1 , As[a] ); 
    insertAfter( As[a].parentNode, corchete2, As[a] ); 
     
    //los eventos que se ocuparan de poner los enlaces y quitarlos 
    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> 
 
</html>

caricatos · #9 (**permalink**) 03/09/2005, 19:46

Bien:

Pero el nodo "parent" no es necesario porque se puede usar parentNode (¡qué jueguito de palabras ha salido!...)

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

quedaría:

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

Se evitaría así que se quisiera colgar un nodo en cualquier sitio... por ejemplo document.body...

Saludos