Perl en Español
  1. Home
  2. Tutoriales
  3. Foro
  4. Artículos
  5. Donativos
  6. Publicidad
 

Insertar espacio en JavaScript

 
Publicar nuevo tema   Responder al tema    Foros de discusión -> Javascript
Mensaje Mar Ago 07, 2007 2:33 am
marcosss
Perlero Nuevo
Perlero Nuevo
 Registrado: 14 May 2007
Mensajes: 87
Insertar espacio en JavaScript Responder citando
Hola, estoy creando un elemento con varios inputs dinámicamente en JavaScript y para separar un input de otro inserto saltos de línea (<br>) porque si inserto un espacio (&nbsp;) no me sale nada, me falla el script JavaScript, me dice que he insertado un carácter inválido.

Para insertar un salto de línea lo hacía:
Código:
txt = document.createElement('<br>');
contenedor.appendChild(txt);


Y ahora para insertar un espacio en blanco:
Código:
txt = document.createElement('&nbsp;');
contenedor.appendChild(txt);


Muchas gracias
Mensaje Mar Ago 07, 2007 3:15 am
explorer
Moderador
Moderador
 Registrado: 24 Jul 2005
Mensajes: 4143
Ubicación: Valladolid, España
Responder citando
¿Y no es más cómodo usar el 'write'?
Mensaje Mar Ago 07, 2007 3:22 am
marcosss
Perlero Nuevo
Perlero Nuevo
 Registrado: 14 May 2007
Mensajes: 87
Responder citando
Pero es que los elementos los inserto dinámicamente, un ejemplo:

Javascript:
<script type="text/javascript">

num=0;
function crearHermano(obj) {
  num++;
                      //Creamos los datos del hermano
 
  papa = obj.parentNode;
  hermano = obj.nextSibling;

  num++;
  contenedor = document.createElement('div');
  contenedor.id = 'div'+num;
  if (hermano == undefined)
        papa.appendChild(contenedor)
               
  else
        papa.insertBefore(contenedor, hermano)

  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
 
  txt = document.createTextNode('DNI: ');                     //Creamos el DNI       
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'cDNIH'+num;
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
       
                                                                                                        //Creamos el nombre
  txt = document.createTextNode('Nombre: ');
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'cNombreH'+num;
  ele.size = '40';
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
 
  txt = document.createTextNode(' Edad: ');               //Creamos la edad
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'cEdadH'+num;
  ele.size='5';
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);


  txt = document.createTextNode(' Estado civil: ');               //Creamos el estado civil (es un select con varias opciones)
  ele = document.createElement('select');
  ele.name = 'cEstadoCivilH'+num;

  opt = document.createElement('option');                     
  opt.value = 'Soltero';
  opt.text =  'Soltero';
  ele.appendChild(opt);

  opt = document.createElement('option');                     
  opt.value = 'Casado';
  opt.text =  'Casado';
  ele.appendChild(opt);

  opt = document.createElement('option');                     
  opt.value = 'Separado';
  opt.text =  'Separado';
  ele.appendChild(opt);

  opt = document.createElement('option');                     
  opt.value = 'Viudo';
  opt.text =  'Viudo';
  ele.appendChild(opt);

  contenedor.appendChild(txt);
  contenedor.appendChild(ele);


 
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createElement('<br>');   // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createTextNode(' Estudios: ');   //Creamos los estudios
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'cEstudiosH'+num;
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);
 
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt); 

  txt = document.createTextNode(' Profesión: ');                        //Creamos la profesión
  ele = document.createElement('input');
  ele.type = 'text';
  ele.size= '40';
  ele.name = 'cProfesionH'+num;
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);
   
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt); 
 
 
  txt = document.createTextNode(' Situación laboral: ');                        //Creamos la situación laboral (es un select con varias opciones)
  ele = document.createElement('select');
  ele.name = 'cSituacionLaboralH'+num;

  opt = document.createElement('option');                     
  opt.value = 'Activo';
  opt.text =  'Activo';
  ele.appendChild(opt);

  opt = document.createElement('option');                     
  opt.value = 'Desempleado';
  opt.text =  'Desempleado';
  ele.appendChild(opt);

  opt = document.createElement('option');                     
  opt.value = 'Sus labores';
  opt.text =  'Sus labores';
  ele.appendChild(opt);

  opt = document.createElement('option');                     
  opt.value = 'Invalidez';
  opt.text =  'Invalidez';
  ele.appendChild(opt);

  contenedor.appendChild(txt);
  contenedor.appendChild(ele);

 
 
 
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  ele = document.createElement('input');
  ele.type = 'button';
  ele.value = 'Borrar';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name,obj)}
  contenedor.appendChild(ele);
 
}

</script>


¿Aquí se puede usar un write?
Mensaje Mar Ago 07, 2007 3:38 am
explorer
Moderador
Moderador
 Registrado: 24 Jul 2005
Mensajes: 4143
Ubicación: Valladolid, España
Responder citando
Pues... ¿se hace con un document.createTextNode('&nbsp;&nbsp;'); y lo agregas con appendChild() al flujo del contenedor?
Mensaje Mar Ago 07, 2007 3:44 am
marcosss
Perlero Nuevo
Perlero Nuevo
 Registrado: 14 May 2007
Mensajes: 87
Responder citando
No, que va, esto no me funciona:

espacio = document.createTextNode('&nbsp;');
contenedor.appendChild(espacio);

Me escribe el &nbsp;
Mensaje Mar Ago 07, 2007 4:58 am
explorer
Moderador
Moderador
 Registrado: 24 Jul 2005
Mensajes: 4143
Ubicación: Valladolid, España
Responder citando
Pero... vamos a ver... ¿tu quieres imprimir en espacio en blanco o espacio en blancos no reducibles (nbsp)?
Mensaje Mar Ago 07, 2007 9:11 am
marcosss
Perlero Nuevo
Perlero Nuevo
 Registrado: 14 May 2007
Mensajes: 87
Responder citando
Yo quiero imprimir espacios en blanco, quiero que los elementos DNI y Nombre estén separados por unos cuantos espacios en blano, pero no lo consigo. He probado ya:
- espacio = document.createTextNode(' ');
contenedor.appendChild(espacio);

- espacio = document.createTextNode('&nbsp;');
contenedor.appendChild(espacio);

- espacio = document.createTextNode('&nbsp');
contenedor.appendChild(espacio);

pero nada me funciona, no consigo imprimir ningún espacio en blanco.
Mensaje Mar Ago 07, 2007 9:42 am
kidd
Creador de Perl en Español
Creador de Perl en Español
 Registrado: 15 Oct 2003
Mensajes: 1389
Ubicación: México
Responder citando
Intenta con:

Javascript:
var espacio = document.createTextNode("\u00a0");


Con la secuencia \u metemos el valor en unicode del espacio no reducible.

Saludos
Mensaje Mar Ago 07, 2007 9:58 am
marcosss
Perlero Nuevo
Perlero Nuevo
 Registrado: 14 May 2007
Mensajes: 87
Responder citando
OK muchas gracias, ya sale
Publicar nuevo tema   Responder al tema    Foros de discusión -> Javascript Todas las horas son GMT - 6 Horas
Página 1 de 1



Powered by phpBB © 2001, 2005 phpBB Group