Alternativa a innerHTML para añadir dinámicamente?

SkOi #1 Feb '14 Inocente

Hola,
llevo un par de días peleándome con mi JS para conseguir que funcione lo que tengo en mente.

Se trata de un formulario dinámico con una lista de colores en el que al pulsar el botón "añadir color" llama a la función Add(), la cual inserta una nueva fila en un fieldset con los inputs correspondientes.

El problema es que al usar fieldtext.innerHTML += html de los nuevos inputs, coge el html original y no los valores actuales, por lo que hay que volver a introducir los valores anteriores.

La función Add viene a ser lo siguiente:

function Add(){
var n = getMax();
var txt ="";

txt += '<div class="form-group">';
txt += ' 	<label class="col-sm-2 control-label">Color #'+n+'</label>';
txt += ' 	<div class="col-sm-2">';
txt += '		<input class="form-control" type="color" name="color'+n+'" id="colorFondo'+n+'" value="#000000" onchange="cargaDatos()" />'; 				
txt += '	</div>';
txt += '	<div class="col-sm-6">';
txt += '		<input class="form-control" type="range" min="1" max="100" step="1" value="50" name="rangeColor'+n+'" id="rangeColor'+n+'" onchange="cambiaRange(\'range\', \'Color'+n+'\')" />';
txt += '	</div>';
txt += '	<div class="col-sm-1">';
txt += '		<input class="form-control" type="number" min="1" max="100" value="50" name="numberRangeColor'+n+'" id="numberRangeColor'+n+'" onchange="cambiaRange(\'number\', \'Color'+n+'\')" />';
txt += '	</div>';
txt += '</div>';

document.getElementById("field").innerHTML += text;
}

*las funciones cambiaRange y cargaDatos son meras funciones para interactuar con los valores.

Si no hay ninguna solución, tengo pensando tirar por crear dinámicamente cada uno de los divs e inputs e ir metiéndolos donde corresponda con .appendChild(), aunque no se si eso sería viable al haber tantas funciones y valores dentro de cada elemento.

Muchas gracias

alterego #2 Feb '14

Creo que al utilizar innerHTML te cargas todos los hijos que tenga, creo que no queda otra que crear elementos y añadirlos, de todas formas, no hace falta crear todos los inputs dinámicamente, sólo el padre.

http://jsfiddle.net/h3KBt

1 1 respuesta

SkOi #3 Feb '14 Inocente

Gracias #2
No se me había ocurrido añadir un div para cada línea y ahí si meter el innerHTML. Incluso me viene bien tener cada color en un div para futuras funciones

grivcon #4 Feb '14

jquery -> $("#div").append("cosa")

1 respuesta

Thanat0s #5 Feb '14 Cofrade

Apunte: innerHTML no funciona en muchas versiones de IE.

1 respuesta

SkOi #6 Feb '14 Inocente

#5 En un principio es una aplicación "privada" para usar con un grupo pequeño de gente, por lo tampoco me preocupo mucho de si funciona o no en otros navegadores. Si algún día llega a publicarse, que espero que si, ya me mataré a arreglar todas estas cosas.

Diría que IE me la suda, pero tengo ya comprobado que algunas de las funciones tampoco funcionan en firefox xD

#4 Creo que nunca utilicé jquery. Tendré que aprender algún día, muchas de las cosas que se me ocurren se quedan por ahí en un todolist porque requieren jquery

2 respuestas

Thanat0s #7 Feb '14 Cofrade

#6 jQuery no tiene ningún misterio, es mirar la documentación oficial y en un día sabes usarlo de forma básica.

Respecto a lo de IE por si necesitas saberlo, la solución que se suele proponer es jugar con el DOM y hacer algo así:

var newdiv = document.createElement("div");
newdiv.innerHTML = xmlhttp.responseText;
var container = document.getElementById(id);
container.appendChild(newdiv);

grivcon #8 Feb '14

#6 yo tenia respeto/miedo pensando que era raro, que era avanzado, que tenias que hacer muchas cosas para instalarlo, usarlo. Pero solo es enlazar un archivo .js y ya esta; ahora no puedo usar js plano si existe un metodo en jquery. A parte que consigues aplicaciones más eficientes que si hicieras tu lo mismo con js plano; al final no mas importante.

Lo que probablemente te eche para atras es lo de $(). No es mas que una palabra reservada para seleccionar elementos html (o objetos js), en plan un div con id Hola-> $("#Hola") y luego lo que quieras hacer con el div. $("#Hola").append("Heyyyy") añade al final del div Hola la cadena Heyyyy, es decir, despues de todo lo que tengas en el div.

gAdrev #9 Feb '14

No pases ni un minuto más sin jQuery. A la que tengas un mínimo de fluidez te preguntarás cómo has podido estar hasta entonces "a pelo"...

1

Alternativa a innerHTML para añadir dinámicamente?

Usuarios habituales

Tags