crear elementos de forma dinamica

[viktoria]

Hola chicos.
Tengo un codigo que crea dinamicamente 2 campos de texto asi
<script type="text/javascript">
<!--
num=0;
function crear(obj){
num++;
//elijimos objeto donde se va a crear o borrar los elementos, en este caso fieldset
fi=document.getElementById('field');

//creamos un div que va a contener los demas elementos y le asignamos nombre de variable "contenedor"
contenedor=document.createElement('div');
//le asignamos un id para poder luego llamar lo para borrar lo
contenedor.id='div'+num;
//anadimos con appendChild el elemento que acabamos de crear al fieldset
fi.appendChild(contenedor);
fi.insertBefore(contenedor,obj);

//creamos elemento input para introducir el nombre
cientifico=document.createElement('input');
//tipo de elemento creado
cientifico.type='text';
//nombre de elemento a crear para poder rejoger su valor en el servidor
cientifico.name='name[]';
cientifico.size='35';
cientifico.maxlenght='150';
cientifico.class='formas1';
//anadimos elemento input text al div crado anterior
contenedor.appendChild(cientifico);

//anadimos otro campo input para anadir actividad de cada miembro de comite cientifico
cientifico=document.createElement('input');
//tipo de elemento creado
cientifico.type='text';
//nombre de elemento a crear para poder recoger su valor en el servidor
cientifico.name='work[]';
//anadimos elemento input text al div creado anterior
contenedor.appendChild(cientifico);
cientifico.maxlenght='150';
cientifico.class='formas1';

//creamos boton para eliminar los campos creados(vamos a eliminar los divs correspondientes)
cientifico=document.createElement('input');
cientifico.type='button';
cientifico.value='borrar';
cientifico.name='div'+num;
cientifico.class='boton';
cientifico.onclick=function(){borrar(this.name)}
contenedor.appendChild(cientifico);

}
function borrar (obj){
fi=document.getElementById('field');
fi.removeChild(document.getElementById(obj));
}
-->

//-------------------------------------
</ script>

y por otra parte el propio div donde se crea los elementos

<form name="add_cientific" action="add_cientific.php" method="get">

<fieldset id="field">
<input type="button" value="+" onClick="crear(this)" />
</fieldset>
<input type="submit" value="añadir" name="add"/></form>


Bien, este codigo me funciona perfectamente en Firefox, pero otro dia tenia que ejecutarlo en Internet Explorer version nueva) y no funciona. Dice que "object expected".

No se donde buscar el origen de incompatibilidad.
Gracais a todos!

[ZiTAL]

para las clases utiliza:

Código:

        cientifico.setAttribute("className","formas1");       
        cientifico.setAttribute("class","formas1");

es el unico que fallo que veo en principio

[caricatos]

Hola:

Con respecto a la clase.... es: cientifico.className... no es necesario usar setAttribute cuando los atributos son normales...

Otra cosa que veo es que insertas el mismo objeto en dos momentos y con distinto método:

fi.appendChild(contenedor);
fi.insertBefore(contenedor,obj);

Hay ocasiones que se debe condicionar el uso de uno u otro método, pero nunca usar los 2 a la vez

Saludos

[viktoria]

Gracias chicos.
Es verdad que no he aplicado clases correctamente, ya me extranaba que no se aplican estilos a los campos de texto.
He puesto cientifico.className='formas1'; y me aplica correctamente los estilos en firefox.

He puesto comentario
//fi.insertBefore(contenedor,obj);
fi.appendChild(contenedor);

para ver si el error puede tener origen desde alli, pero no es asi.

Tengo pleno funcionamiento en firefox y me persigue el mismo error en Explorer.

[viktoria]

Hola chicos/as de nuevo.
Sigo con esto y no veo el orgen de error.
Quite todo el codigo, solo deje lo que he puesto arriba en el topic.
Aqui esta enlace.

http://www.eves.es/prueba.php

Podeis ver que en firefox va bien y en Explorer da el siguiente error: line 70 Object expected

En line 70 tengo esto
<input type="button" value="+" onClick="crear(this)" />

Alguien me puede echar una mano que no se ni que hacer ya.

[caricatos]

Hola:

Algunos errores:

La línea 55 sigue poniendo class donde debería ser className.
No cierras bien el comentario html, debe precederle //

<script...>
<!-- aquí tus códigos
...
//--><!-- debes cerrar el comentario así: // -->

La verdad es que la manipulación de controles puede tener diversos errores según el navegador... creo que no se puede modificar el type así... prueba usando setAttribute...

cientifico.setAttribute("type", "button");

El name con explorer no hay forma de ponerlo... por lo tanto para esos controles tal vez sea mejor tener uno escondido con los atributos y métodos que quieras y clonarlo...

<div id="oculto" style="display: none" >
<input type="text" id="control_oculto" name="Mi_nombre" onclick="manejarme(this)" />
</div>

Y luego crearlo así:

nuevoControl = document.getElementById("control_oculto").cloneNod e(true);
nuevoControl.id = "nuevo_Id";
contenedor.appendChild(nuevoControl);

Pero el nombre tendría que ser siempre el mismo (por culpa del explorer)

Saludos

[viktoria]

Muchas gracias caricatos.
Al final resulto que el error se originaba en no aplicar estilo de forma correcta al boton "borrar".
Es curioso, porque en Firefox el codigo funciona y no salta ningun error.
Tambien es curioso que el error sale en IE solo si aplicas estilo mal al boton, porque aplicandolo lo mal al campo de texto no da error.
En fin, es interesante, sigo investigando los limites de navegadores.

Que tampoco se trata de aplicar mal los estilos sino que el resultado de ello es nada esperado. Voy a poner como practica desarrollar en IE, aunque no me gusta nada.
Gracias de nuevo.