al hacer un innerHTML en firefox me borra el valor de un input en el mismo div

[seedwallgon]

tengo el siguiente código:

Código:

<script language="javascript" type="text/javascript">
			
	function agrega(){
		var div = document.getElementById('capa');
		div.innerHTML += 'prueba';
	}
</script>

y en el body:

Código:

<div id="capa">
      <input name="b">
</div>
<a href="javascript:agrega();">Agrega</a>

Utilizando Firefox, si escribo algo en el campo "b" y luego hago clic en agregar, limpia lo que estaba escrito en el campo.

y necesito solucionarlo de una forma que no sea guardando el valor del campo y volviéndolo a agregar luego porque tengo que aplicarlo en un código que tiene campos dinámicos

si alguien tiene idea de como es esto le agradezco.

[zerokilled]

eso es normal con innerHTML ya que este lee el codigo fuente. de modo que lo que se escribe en el campo no es parte del codigo fuente original. deberias usar funciones DOM como createElement y appendChild.

[seedwallgon]

a ok, pensé que el innerHTML simplemente agregaba al final de lo que estuviera pero no sabía que leía lo que estuviera en el código original, como funcionaba correctamente en IE, jejeej, bueno probé esto y me funcionó bien ahora veré de integrar ese código en el que tengo, pero creo que va todo bien si,

bueno gracias por la ayuda

[seedwallgon]

mmm, el tema es que lo que agrega dinámicamente no es un campo solo sino es un trozo de código html, una tabla con varios campos, supongo que la única manera será ir haciéndolo por partes, ¿o hay alguna forma de introducir todo ese html de una?

[zerokilled]

pues la verdad que hacerlo por parte es tedioso si tienes multiples elementos distintos. lo que se me ocurre es crear un elemento temporeramente. luego, el nuevo contenido lo agregas a ese elemento con innerHTML. finalmente, agarras todos los nodos de ese elemento y lo agregas en el lugar correcto de tu documento con appendChild.

[seedwallgon]

pa, veo que me complica bastante de las dos formas, debería haber algo como el createElement pero que permita ingresar paquetes de código html ya armados previamente...

[seedwallgon]

en IE el innerHTML detecta lo que se escribe en los campos

[buzu]

Nah, amigo zerokilled, te lo complicas mucho. Solo guarda el valor de 'b' en una variable, usa tu innerHTML normalmente y luego le pones a b el valor que tenía.

Código Javascript:

<script language="javascript" type="text/javascript">
            
    function agrega(){
        var div = document.getElementById('capa');
                var  inpt = document.getElementsByName('b')[0];
                var bVal = b.value;
        div.innerHTML += 'prueba';
                inpt.value = bVal;
    }
</script>
 

Para empezar yo probaría con eso...

[seedwallgon]

al final encontré algo que me lo soluciona, no se como funciona pero hace lo que deseo pero claro que solo para firefox, solo me queda preguntar que navegador es y hago esto o innerHTML
.........

Código:

var para = document.getElementById("capa");
var s = "<span>HOLA</span>";
var range = document.createRange();
range.selectNode(document.body);
var documentFragment = range.createContextualFragment(s);
para.appendChild(documentFragment);

[seedwallgon]

amigo buzu, el tema es que no me puedo referir al campo con el nombre porque es un campo dinámico y por el id tampoco, tendría que estar todo dentro de un bucle y es complicarla demasiado, quería algo que funcionara como el innerHTML en IE pero para firefox y con eso que encontré se soluciona, no se si es lo mejor pero es corto, porque no es que no me quiera complicar sino que el código es bastante complicado ya porque es todo dinámico.

Gracias a ambos por la ayuda por ahí la fui encontrando

[zerokilled]

@buzu,
para un caso tan simple, pues tienes razon. pero esta fijado especificamente para la estructura de ese documento. yo lo visualizaba mas para cualquier tipo de contenido y estructura. por ejemplo,

Código:

function addContent(content, element){
var div = document.createElement("div");
div.innerHTML = content;
while(div.firstChild)element.appendChild(div.firstChild);
}

@seedwallgon,
no tengo idea del codigo que has mostrado porque hasta la fecha de hoy no me he interesado en las funciones Range pero creo (no estoy seguro) que en iexplorer tiene otras funciones similares.

[seedwallgon]

Para IE el innerHTML me funciona bien, porque registra hasta lo que escribas en los campos...

[buzu]

zerokilled, eso es cierto, es para este caso concreto.

Aun con un campo dinámico se puede hacer, todo es cuestión de ver como se agrega y todo. De cualquier modo, si ya lo solucionaste, creo que aquí no hay más que hacer... jeje

Saludos.