Autor Tema: JavaScript nodos clonenode removechild, replacechild, insertbefore CU01141E  (Leído 1413 veces)

Salvadoruve2

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Hola, alguien podría explicarme algunos asuntos que no entiendo de la entrega CU01141E del curso básico de programador web con Javascript?

1- No entiendo bien como fuciona la sintaxis:

Citar
nodoQueSeráPadreDelNuevoNodo.insertBefore(nuevoNodo, nodoAntesDelQueHaremosLaInserción);

en el ejemplo mas abajo está la función:
Código: [Seleccionar]
var nodoForm = document.querySelector('form');

var nuevoNodo = document.createElement('div');

contador = contador+1;

nuevoNodo.innerHTML = '<label for="nombre'+contador+'"><span>Nombre persona '+contador+':</span> <input id="nombre'+contador+

'" type="text" name="nombre'+contador+'" /></label>'+

'<label for="apellidos'+contador+'"><span>Apellidos persona '+contador+':</span> <input id="apellidos'+contador+

'" type="text" name="apellidos'+contador+'" /></label>'+

'<label for="email'+contador+'"><span>Correo electrónico persona '+contador+':</span> <input id="email"'+contador+

' type="text" name="email'+contador+'" /></label>'+

'<p>Si quieres apuntar simultáneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa aquí</span></p>';

nodoForm.insertBefore(nuevoNodo, nodoForm.querySelector('#referenciaVacia1'));


No entiendo si nuestro nuevoNODO está ahora dentro de nodoFORM o por el contrario está alojado en el div con id = referenciaVacia1, que está vacío y ha sido creado abajo.

Aquí el código completo del ejemplo:

Código: [Seleccionar]
<!DOCTYPE html>

<html>

<head>

<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css">

body {background-color:yellow; font-family: sans-serif;}

label {color: maroon; display:block; padding:5px;}

.simulaLink {color: blue; cursor:pointer;}

</style>

<script type="text/javascript">

var contador = 1;

function addPersona () {

var nodoForm = document.querySelector('form');

var nuevoNodo = document.createElement('div');

contador = contador+1;

nuevoNodo.innerHTML = '<label for="nombre'+contador+'"><span>Nombre persona '+contador+':</span> <input id="nombre'+contador+

'" type="text" name="nombre'+contador+'" /></label>'+

'<label for="apellidos'+contador+'"><span>Apellidos persona '+contador+':</span> <input id="apellidos'+contador+

'" type="text" name="apellidos'+contador+'" /></label>'+

'<label for="email'+contador+'"><span>Correo electrónico persona '+contador+':</span> <input id="email"'+contador+

' type="text" name="email'+contador+'" /></label>'+

'<p>Si quieres apuntar simultáneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa aquí</span></p>';

nodoForm.insertBefore(nuevoNodo, nodoForm.querySelector('#referenciaVacia1'));

}

</script>

</head>

<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didáctica y divulgación de la programación</h2></div>

<!-- Formulario de contacto -->

<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">

<p>Indica los datos de la persona que se apunta al curso:</p>

<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>

<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>

<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>

<p>Si quieres apuntar simultáneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa aquí</span></p>

<div id="referenciaVacia1"></div>

<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form></body></html>
« Última modificación: 14 de Julio 2016, 14:09 por César Krall »
Dt. Crane psychiatrist

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola Salvador.

El nuevo nodo se insertará dentro del formulario, delante del elemento con "id=referenciaVacia1"

Para ver estos resultados, al ejecutar el código en el navegador, pulsa F12, si usas Chrome, en la pestaña "elements" podrás ver todos los nodos que contiene el código, y en Firefox en la pestaña "inspector".

A ver si con eso puedes resolver tus dudas.

Saludos. ;D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".