jump to navigation

innerHTML vs appendChild() Martes, 20 marzo 2007

Posted by israelof in Implementación.
trackback

He tenido muchas dificultades en la implementación de la nueva versión de la zona de edición de código. En esta nueva versión he introducido una mejora que consiste en la edición de múltiples ficheros a la vez mediante el uso de pestañas, de modo que podemos cambiar de un fichero a otro rápidamente. Para poder implementar esto, me he basado en JavaScript, de modo que todo se realiza en el lado del cliente, excepto la parte de la carga del código fuente, que se le solicita al servidor.

El problema lo he tenido a la hora de usar innerHTML para ir introduciendo los diferentes ficheros de edición. Como sabemos innerHTML nos permite obtener y modificar el contenido que existe entre una etiqueta. El problema se encuentra en que si queremos introducir o modificar el código HTML dentro de una etiqueta, los navegadores refrescan el código que se ha introducido, de modo que si queremos meter iframes, como es mi caso, cada uno de los iframes introducidos se refrescarán, con la pérdida de las modificaciones que hayamos hecho en el iframe (sabiendo que son iframes editables). La forma usada para introducir los iframes era la siguiente:


var contenidoHTML = <iframe id=”codigo” src=”pagina.php?file=main.c&id=1″></iframe>
var contenedor = document.getElementById(“contenedor”);
contenedor.innerHTML = contenidoHTML + contendor.innerHTML;

De modo que la solución ha sido crear los contenidos directamente creando los nodos con JavaScript, en vez de incorporar el contenido con texto HTML. La forma de hacerlo ha sido similar a la siguiente:


var nodo = document.createElement(“iframe”);
nodo.id = “codigo”;
nodo.src=”pagina.php?file=main.c&id=1″;
var contenedor = document.getElementById(“contenedor”);
contenedor.appendChild(nodo);

De este modo tenemos el mismo efecto que hacíamos pegando el código HTML como texto, pero la ventaja es que no se refrescan los contenidos dentro del nodo padre “contenedor”, así pues, los iframes contenidos permanecen inalterados sin recargarse, que es lo que se pretendía desde el principio.

Anuncios

Comentarios»

1. Patricia - Martes, 23 marzo 2010

Hola, muy buena tu aportacion. Disculpa, tengo una duda que ojala me pudieras ayudar, al igual que tu utilizo innerHTML para modificar el contenido en una etiqueta. Ese contenido contiene textbox con valores que necesito ir sumando con javascript. Un usuario agrega una etiqueta con contenido nuevo y se necesita sumar ese contenido. El problema es que al querer acceder al textbox(creado dentro de las etiquetas con ajax) por document.forms.textbox1.value, me marca error de que no existe, pero si antes de accerder a ese objeto, mando un alert(‘cualquiercosa’), ahora si me deja acceder al objeto. Me imagino que necesito poner algo cuando creo el ajax o en javascript como update o algo si. Ojala me puedas ayudar porque nose exactamente que me falta.

2. geynen - Jueves, 3 junio 2010

Como harias para darle algun tipo de formato como ponerlo en negrita o cualquier formato html en el caso de usar appendChild(nodo);


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: