Uso del DOM para crear y modificar objetos HTML

A menudo cuando desarrollamos una aplicación, nos vemos en la necesidad de crear “al vuelo” objetos, si estamos hablando de aplicaciones web, lo típico es poder crear objetos del HTML para cualquier eventualidad. Lo que vamos a hacer, es utilizar el DOM para poder llevar a cabo esa labor.

¿Qué es el DOM

Para los no entendidos, el DOM es una interfaz para acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML

Llevando a cabo la tarea

Primero necesitamos crear una capa común y corriente con un identificador perfectamente válido.

^?[Copiar al portapapeles]Ver código HTML

<div id="contenedor"></div>

Ahora, vamos a crear una función con javascript donde utilizaremos el DOM, pero primero definamos algunas funciones básicas.

createElement – Crea un elemento HTML o XML válido
setAttribute – Crea el atributo deseado con su valor para el elemento HTML o XML válido
appendChild – Agrega el elemento recientemente creado a un elemento HTML o XML válido
createTextNode – Crea un nodo de texto que se puede aplicar a un elemento HTML o XML válido

Ahora supongamos que vamos a crear esa función antes mencionada, le llamaremos crear y dentro de ella, creamos una caja de texto.

^?[Copiar al portapapeles]Ver código JAVASCRIPT

<script language="javascript">
function crear()
{
caja = document.createElement("input");
caja.setAttribute("type", "text");
caja.setAttribute("id", "nombre");
document.getElementById("contenedor").appendChild(caja);
}
</script>

Como podemos apreciar, la variable caja se encarga de crear un objeto de tipo input, luego, con setAttribute definimos que sera de tipo text y tendrá por identificador la palabra nombre, finalmente agregamos con appendChild la variable caja – La nueva caja de texto – a la capa llamada contenedor. Supongamos que queremos que tenga un texto inicial y un color azul de fondo con letras blancas, podemos seguir agregando atributos.

^?[Copiar al portapapeles]Ver código JAVASCRIPT

caja.setAttribute("value", "Soy una inocente caja de texto");
caja.setAttribute("style", "background-color: #003399; color: #FFFFFF;");

Modificando los objetos

Notemos que, también podemos definir la propiedad style para aplicar un poco de CSS. Pero vayamos un poco más, vamos a definirle algunos atributos nuevos a nuestra capa con el DOM.

^?[Copiar al portapapeles]Ver código JAVASCRIPT

document.getElementById("contenedor").setAttribute("style", "background-color: #000000; width: 200px; height: 100px;");

Todo este código lo puede colocar donde usted necesite, invocarlo con un botón, al seleccionar un cuadro combinado (combo), al cargar la página, etc. La decisión es suya, para terminar, vamor a colocar la llamada al a función Javascript en el <body> como sigue:

^?[Copiar al portapapeles]Ver código HTML

<body onLoad="javascript: crear();">

Y quedaría así el resultado:

Fechas con Combobox y PHP