Foros del Web » Programando para Internet » Javascript »

appendChild a la "inversa"

Estas en el tema de appendChild a la "inversa" en el foro de Javascript en Foros del Web. Hola: Me gustaría poder una página que se vayan agregando div a un nodo en concreto por ejemplo con id=msg_text Lo habitual (que tengo yo ...
  #1 (permalink)  
Antiguo 28/10/2010, 08:15
 
Fecha de Ingreso: abril-2010
Ubicación: L'Hospitalet de LLobregat
Mensajes: 43
Antigüedad: 14 años
Puntos: 0
appendChild a la "inversa"

Hola:

Me gustaría poder una página que se vayan agregando div a un nodo en concreto por ejemplo con id=msg_text
Lo habitual (que tengo yo ahora mismo) es hacer lo siguiente:
Código Javascript:
Ver original
  1. var targetNode = document.getElementById("msg_text");
  2. var p = document.createElement("div");
  3. p.innerHTML = mensajeMostrado;   // mensajeMostrado cada vez seria algo distinto
  4. targetNode.appendChild(p);
Con esto se consigue que aparezca si por ejemplo mensajeMostrado es A, luego B, C, D:
A
B
C
D

Y yo lo que quiero conseguir es que se vea AL REVES:
D
C
B
A

A alguien se le ocurre como hacerlo en javascript?????????

Un saludo y muchas gracias
  #2 (permalink)  
Antiguo 28/10/2010, 09:43
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 3 meses
Puntos: 45
Respuesta: appendChild a la "inversa"

Buenas,

puedes utilizar el método insertBefore para insertar un elemento delante de cualquier otro, por ejemplo:

Código Javascript:
Ver original
  1. function init()
  2. {
  3.     var crearP = document.getElementById('crear');
  4.     crearP.onclick = crear;
  5. }
  6.  
  7. window.onload = init;
  8.  
  9. function crear()
  10. {
  11.     var cont = document.getElementsByTagName('div')[0]; // primer div
  12.     var nuevo = document.createElement('p');
  13.     nuevo.innerHTML = 'nuevo parrafo';
  14.     var ref = cont.getElementsByTagName('p')[0]; // primer p dentro de cont
  15.     cont.insertBefore(nuevo, ref); // ahora nuevo es el primer p
  16.     return false; //cancelar el evento
  17. }
  18.  
  19. //fin

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="es">
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <meta name="Language" content="Spanish">
  5. <script type="text/javascript" src="fichero.js"></script>
  6. <title>insertBefore</title>
  7. </head>
  8. <div>
  9. <a href="" id="crear">Crear p&aacute;rrafo</a>
  10. <p>yo ya existo</p>
  11. </div>
  12. </body>
  13. </html>

Última edición por Tecna; 28/10/2010 a las 09:46 Razón: código html
  #3 (permalink)  
Antiguo 29/10/2010, 03:22
 
Fecha de Ingreso: abril-2010
Ubicación: L'Hospitalet de LLobregat
Mensajes: 43
Antigüedad: 14 años
Puntos: 0
Respuesta: appendChild a la "inversa"

Muchisimas gracias, me ha servido perfectamente :)

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:19.