Foros del Web » Programando para Internet » Javascript »

intento insertar un parrafo nuevo dentro de un div

Estas en el tema de intento insertar un parrafo nuevo dentro de un div en el foro de Javascript en Foros del Web. Estoy intentando insertar un parrafo nuevo dentro de un div quedando el primero pero me esta insertando solo el texto, este es el codigo: @import ...
  #1 (permalink)  
Antiguo 25/02/2015, 05:32
 
Fecha de Ingreso: abril-2011
Mensajes: 867
Antigüedad: 13 años, 6 meses
Puntos: 5
intento insertar un parrafo nuevo dentro de un div

Estoy intentando insertar un parrafo nuevo dentro de un div quedando el primero pero me esta insertando solo el texto, este es el codigo:


Código HTML:
Ver original
  1. <div  id='datos'>
  2. <p>unico parrafo</p>
  3. </div>

Código Javascript:
Ver original
  1. contenido="nuevo parrafo";
  2. p_nuevo = document.createElement('p').appendChild(document.createTextNode(contenido));
  3. parrafo = document.getElementById('datos').getElementsByTagName('p')[0];
  4. document.getElementById('datos').insertBefore(p_nuevo,parrafo);

viendo el codigo fuente me aparece solo el texto añadido pero si la etiqueta p.
saludos.

Última edición por roboty; 25/02/2015 a las 05:38
  #2 (permalink)  
Antiguo 25/02/2015, 06:47
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 10 años, 4 meses
Puntos: 44
Respuesta: intento insertar un parrafo nuevo dentro de un div

Por qué estás creando un text node para añadir al párrafo? Eso es lo que está trayendo problemas. Simplemente creá la nueva etiqueta <p> y pasale el contenido como innerHTML:

Código Javascript:
Ver original
  1. var contenido = "nuevo parrafo";
  2. var p_nuevo = document.createElement('p');
  3.     p_nuevo.innerHTML = contenido;
  4. var parrafo = document.getElementById('datos').getElementsByTagName('p')[0];
  5.  
  6. document.getElementById('datos').insertBefore(p_nuevo,parrafo);

Saludos :)
  #3 (permalink)  
Antiguo 25/02/2015, 16:26
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 18 años, 4 meses
Puntos: 32
Respuesta: intento insertar un parrafo nuevo dentro de un div

La solución de GeekGirl está bien, pero esto no quiere decir que tu enfoque esté mal. Simplemente has tenido un despiste. Fíjate en la documentación de appendChild. Dice que:

Cita:
The returned value is the appended child.
Es decir, que appendChild devuelve el hijo insertado. Así que el valor asignado a la variable p_nuevo será el elemento textNode insertado. Por eso, te ocurre lo que dices ¿Cómo se puede solucionar? Haciendo las cosas paso por paso:

Código Javascript:
Ver original
  1. var contenido = "nuevo parrafo";
  2. // crea y asigna a p_nuevo el elemento párrafo que creas
  3. var p_nuevo = document.createElement('p')
  4. // inserta en p_nuevo el elemento textNode que creas
  5. p_nuevo.appendChild(document.createTextNode(contenido));
  6. // crea una variable datos donde asignar el div contenedor de parrafos
  7. var datos = document.getElementById('datos')
  8. // obten el primer parrafo
  9. parrafo = datos.getElementsByTagName('p')[0];
  10. // inserta el nuevo parrafo antes del primer parrafo
  11. datos.insertBefore(p_nuevo,parrafo);

Un saludo!
__________________
github.com/xgbuils | npm/xgbuils

Etiquetas: intento
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 22:47.