Borrar y rellenar el contenido de un div con DOM

Webmaster — Thu, 06 Aug 2009 16:53:27 +0000

Cuando utilizamos javascript para modificar contenido en una página, tenemos varias opciones. Una de ellas es innerHTML.

Esta opción seria maravillosa, porque permite añadir contenido a un div de forma muy simple, ademas permite añadir código html que sera interpretado como tal.

El inconveniente de innerHTML es que no es una función estándar, es decir, esta no se especifica en el estándar de javascript (ECMA-262).

La otra opción es utilizar DOM, de esta forma respetamos el estándar. Por desgracia utilizar DOM es algo mas complicado que innerHTML.

Para solucionar el problema mencionado al principio, manejar contenido con javascript, he creado varias funciones que nos facilitan este trabajo.

Una de ellas se encarga de eliminar todo el contenido de un div y la otra de escribir un texto ( sin código HTML ).

Podéis ver un ejemplo real aquí.

Funciones:

        //Eliminar el contenido de un div
        function limpiarDiv(id)
        {
            var div;
 
                div = document.getElementById(id);
 
                while(div.hasChildNodes())
                {
                    div.removeChild(div.lastChild);
                }
        }
 
        //Escribir en un div
        function rellenarDiv(id, texto)
        {
            var div;
            var nodoTexto;
 
              div = document.getElementById(id);
 
              nodoTexto = document.createTextNode(texto);
 
              //Llamamos a la función limpiarDiv para eliminar el contenido
              //actual del div.
              limpiarDiv(id);
 
              div.appendChild(nodoTexto);
        }

¿Más código? » div

Borrar y rellenar el contenido de un div con DOM