> Manuales > Taller de Javascript

Mecanismo y funciones sencillas para escribir dinámicamente texto en una capa.

El texto que se encuentra almacenado dentro de una capa, se encuentra dentro de la propiedad innerHTML. Esta propiedad, esta implementada en Internet Explorer desde la versión 4, y Netscape lo ha incorporado en las versiones 6 y 7 a pesar de que no se encuentra definido en el estandar del W3C.

Referencia: Este artículo ofrece ayudas para las que es necesario conocer un poco Javascript y el método getElementById(). Recomendamos consultar estos enlaces:

Programación en JavaScript
Capas con Internet Explorer 5, 6, Netscape 6, 7 y Opera


La propiedad almacena el código HTML que se corresponde con lo que se visualiza dentro de la capa, es decir, si la capa contiene " hola " la propiedad contendrá " hola " sin embargo, si la propiedad contiene un hipervínculo http://www.desarrolloweb.com entonces la cadena de texto contendrá "<a href='http://www.desarrrolloweb.com'>http://www.desarrolloweb.com</a>, por lo que se podrá escribir cualquier tipo de contenido dentro de la capa.

El siguiente ejemplo, contiene un formulario con una caja de texto, el usuario puede escribir cualquier texto ó código HTML, y al pulsar el botón, este se mostrará dentro de la capa.

La función recibe por parámetro el nombre de una capa, y el formulario que contiene la caja de texto, guarda el valor del cuadro de texto dentro de una variable y a continuación se la asigna a la propiedad innerHTML de la capa:

function escribeCapa(capa,formulario){
texto=formulario.caja.value;
document.getElementById(capa).innerHTML=texto;
}


Ejemplo completo:

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function escribeCapa(capa,formulario){
texto=formulario.caja.value;
document.getElementById(capa).innerHTML=texto;
}
</script>
</head>
<body>
<div id="micapa" style="position:absolute;width:100;height:100;top:100;left:100;background-color:yellow"> </div>
<form name="miformulario" action="#">
Texto: <input type="text" name="caja" size="50"> <input type="button" onclick="escribeCapa('micapa',this.form)" value="escribir">
</form>
</body>
</html>


Ver ejemplo en una página a parte.

Carlos Luis Cuenca

Manual