Cambiar el contenido de una capa con JavaScript

Raro sería encontrarnos una nueva página que no estuviese diseñada basada en capas y lo estuviese en tablas como se diseñaba tiempo atrás. Y es que las capas conjunto con las hojas de estilo CSS son la base de toda página web con un buen diseño.

Es por ello que el saber como cambiar el contenido de una capa, completará los diseños permitiendo el dinamismo sobre la misma.

Crear una capa con DIV

Los pasos para cambiar el contenido de una capa con JavaScript son muy sencillos. Lo primero será el crear un capa. Las capas se crean mediante el elemento DIV.

<div id="micapa">Contenido de la capa</div>

Es muy importante el dotarle de un identificador a la capa. Esto lo conseguimos mediante el atributo id. Y es que mediante el código Javascript accederemos a la capa y a su contenido con dicho ID.

Acceder a la capa con getElementById

En este caso será el método getElementById sobre el que nos apoyaremos. Una vez obtenido el acceso a la capa tenemos acceso al atributo innerHTML, el cual representa su contenido.

Por consiguiente, para cambiar el contenido de una capa habrá que modificar el contenido de este atributo. Un código de ejemplo sería el siguiente:

function cambiarContenido() {
  document.getElementById('micapa').innerHTML = document.getElementById('contenido').value;
}

Formulario para cambiar el contenido

Solo nos quedará invocar a este método. En este caso utilizamos un formulario para que el usuario pueda proporcionar el contenido mediante un textarea.

<form>
  <textarea id="contenido" rows="10" cols="50"></textarea>
  <input type="button" value="Cambiar Contenido" onclick="cambiarContenido();">
</form>