Hola a todos!, os resumo mi problema a ver si alguien puede ayudarme, creo que debe ser algo fácil pero no tengo demasiadas nociones de js y llevo varios dias atascado.
Mi objetivo es hacer un formulario, en el que tengo un input(llamado pais) con un boton Añadir.
Al hacer click en añadir saco nuevos inputs que no estaban antes y los coloco bajo el input "pais", debajo de todo esto tengo un boton Enviar Registro.Todo funciona como es debido excepto por que los nuevos inputs se colocan bajo el botón Enviar Registro, en lugar de encima de este botón (y bajo el input "pais" que es donde quiero que se coloque):
Aqui va el código del que hablo
Código HTML:
<!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" />
<title>Documento sin título</title>
<link href="../includes/estilos.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
if (num <= 1) {
num++;
fi = document.getElementById('fiel');
contenedor = document.createElement('div');
contenedor.id = 'div'+num;
fi.appendChild(contenedor);
/*****************/
ele = document.createElement('input');
ele.type = 'text';
ele.className = 'impCol';
contenedor.appendChild(ele);
ele = document.createElement('input');
ele.type = 'button';
ele.value = 'Borrar';
ele.name = 'div'+num;
ele.className ='impCol';
ele.onclick = function () {borrar(this.name)}
contenedor.appendChild(ele);
} else {
alert ('Máximo de 3 .');
}
}
function borrar(obj) {
num--;
fi = document.getElementById('fiel'); // 1
fi.removeChild(document.getElementById(obj)); // 10
}
-->
</script>
</head>
<body>
<div id="fiel">
<label for="textfield">País:</label>
<input class ="impCol" type="text" maxlength="20" name="pais" id="pais" size="20"/>
<input class ="impCol" type="button" value="Añadir" onclick="crear(this)" />
</div>
<input class ="impCol" type="submit" name="reg" id="reg" value="Enviar Registro" />
</body>
</html>
Esto funciona(a no ser que al quitar las partes no importantes haya quitado algo), lo único que mi nuevo input se genera debajo de Enviar Registro y necesito que se genere entre Enviar Registro y el input Pais.
He probado añadiendo en la linea comentada esto:
fi.insertAfter(contenedor,obj);
Pero firebug me da un error diciendo que el nodo obj no existe, cosa extraña pues es el que mando a la función.
Alguna idea o sugenrencia?
Gracias de antemano