appendChild pero que lo coloque encima

humanista · #1 (**permalink**) 02/09/2010, 08:00

Hola, estoy montando un foro y uso appendChild para mostrar los nuevos mensajes.

en lugar de q los mensajes aparezcan:

1
2
3

quiero q el último mensaje aparezca el primera (encima de todos como un montón), es decir:

3
2
1

con appendChild consigo lo primero pero no lo segundo, q hacer?

shava · #2 (**permalink**) 02/09/2010, 08:16

Si obtienes los datos de un array ordenado, prueba a darle la vuelta al array y continúas con el mismo proceso.

En otro caso, mira a ver esto que te parece

http://bytes.com/topic/javascript/answers/819579-append-child-first-node

humanista · #3 (**permalink**) 02/09/2010, 08:38

yo lo que hago es:

Código PHP:

Ver original<div id="nuevocomentario"></div>

Código Javascript:

Ver originalvar texto = document.createElement('div');
 
document.getElementById("nuevocomentario").appendChild(texto);

y el código que me aconsejas es:

Código Javascript:

Ver originalvar who=document.createElement('p');
var pa= document.getElementsByTagName('div')[0];
 
if(pa.firstChild) pa.insertBefore(who,pa.firstChild);
else pa.appendChild(who);

cómo puedo compatibilizar uno con otro?

humanista · #4 (**permalink**) 02/09/2010, 09:17

tb he encontrado este código q no logro acoplar a mi caso particular:

Código Javascript:

Ver original<script type="text/javascript">
<!--
function f (nodo)
{
var newNodo=nodo.cloneNode(true);
 
newNodo.setAttribute("class", "rojo");
 
document.body.insertBefore(newNodo,nodo);
}
//-->
</script>
 
<style type="text/css">
<!--
p {border: 1px solid black}
p.rojo {background-color: red}
-->
</style>
 
</head>
<body>
 
<p>El método <b>insertBefore</b>
requiere dos argumentos: el nodo a
insertar y el node de referencia
(delante del cual se inserta el primero).
<br>Si el nodo de referencia es
<b>null</b> el primer nodo se inserta
al final.</p>
 
<p onclick="f(this)">Observa como al
pulsar el botón del ratón sobre este
párrafo, un duplicado del mismo se
añade delante de éste en el cuerpo del
documento.</p>
 
<p>Para destacar el nuevo nodo
(párrafo), éste se muestra de color rojo.
</p>

Adler · #5 (**permalink**) 02/09/2010, 16:29

Hola

Aquí tienes una adaptación que puede que te ayude

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
var arr = ['mensaje 1', 'mensaje 2', 'mensaje 3'];
function f (){
var divmsg = document.getElementById('mensajes');
 
for (var i = 0; i < 3; i++) {
donde = document.getElementById('p'+parseInt(i-1))
 
var nodo = document.createElement('p');
nodo.setAttribute("class", "rojo"+i);
nodo.setAttribute('id', 'p'+i);
nodo.innerHTML = arr[i];
 
if (divmsg.getElementsByTagName('p').length == 0) {
divmsg.appendChild(nodo);
} else {
divmsg.insertBefore(nodo, donde);
}
}
}
//-->
</script>
 
<style type="text/css">
<!--
p {border: 1px solid black}
p.rojo0 {background-color: red}
p.rojo1 {background-color: green}
p.rojo2 {background-color: yellow}
-->
</style>
 
</head>
<body>
<div id="mensajes"></div>
 
<input type="button" value="Mensajes" onclick="f();" />
</body>
</html>

Suerte

zerokilled · #6 (**permalink**) 02/09/2010, 18:08

segun lo que entiendo, basicamente lo que quieres hacer es invertir el orden de los nodos. he aqui un codigo que escribi usando la idea de invertir el orden. le pasas como argumento la referencia del elemento padre de los elementos que quieres invertir. para que funcione correctamente, se asume que todos los mensajes estan presentes en el DOM y tienen el mismo padre. fijate que no solo va afectar los mensajes si no a todos los elementos del mismo nivel.

Código:

function invertNodes(element){
for(var last = element.lastChild; last.previousSibling; element.appendChild(last.previousSibling));
}

humanista · #7 (**permalink**) 03/09/2010, 03:05

ok, gracias. al final he encontrado una solución creo q más sencilla pero me da problema, no logro depurarla al máximo.

primero tengo:

Código HTML:

Ver original<div id="nuevocomentario"></div>

y luego mediante una función en AJAX con la que le paso la varibale texto:

Código Javascript:

Ver originalvar parrafo = document.createElement('div');
parrafo.appendChild(document.createTextNode(texto));
var elementoReferencia = document.getElementById('nuevocomentario').getElementsByTagName('div')[0];
document.getElementById('nuevocomentario').insertBefore(parrafo,elementoReferencia);

me coloca el texto con el insertBefore justo encima, tal y como deseo, el problema es que si por ejemplo:

Código Javascript:

Ver originalvar texto='<font size=5>Mi texto</font>';

me saca en pantalla tal cual

Código HTML:

Ver original<font size=5>Mi texto</font>

y no Mi texto con tamaño 5. es decir toda la variable texto para él es eso, texto, no html.

cómo podría solucionarlo?

creo q debería usar innerHTML pero no logro saber dónde o cómo...

humanista · #8 (**permalink**) 03/09/2010, 05:02

tal 1000 y 1 pruebas, lo conseguí!!!

tan sólo tenía q añadir:

parrafo.innerHTML = texto;

después de:

parrafo.appendChild(document.createTextNode(texto) );

por si a alguien le sirve

gracias a todosss

humanista · #9 (**permalink**) 03/09/2010, 05:35

aggggr, mi gozo -por ahora- en un pozo.

lo he probado en Chrome, Mozilla, Opera y Safari y me va bien pero... una vez más el maldito IE da problemas. Me sale el error: "Argumento no válido" en la última línea.

os pego el código:

Código Javascript:

Ver originalvar texto="";
    
        var parrafo = document.createElement('div');
 
        texto+= '<table border=0 cellpadding=0 cellspacing=0>';
        texto+= '<tr><td>mi texto</td></tr>';
                texto+= '</table>';
 
        parrafo.appendChild(document.createTextNode(texto));
        parrafo.innerHTML = texto;
        var elementoReferencia = document.getElementById('nuevocomentario').getElementsByTagName('div')[0];
            document.getElementById('nuevocomentario').insertBefore(parrafo,elementoReferencia);

Adler · #10 (**permalink**) 03/09/2010, 07:02

Hola

Prueba suministrando una id

Cita:

parrafo.setAttribute('id', 'p');

Ahora la variable elementoReferencia quedaría así

Cita:

var elementoReferencia = document.getElementById('p');

Como supongo que has de crear mas elementos, aplica parte del código que te imprimí en post anteriores. De cualquier modo, no me gusta demasiado ese código
¿Has probado la función de @zerokilled? Tiene buena pinta
Suerte

humanista · #11 (**permalink**) 03/09/2010, 09:00

me funciona perfecto Adler!!!, muchas gracias