Insertar texto en HTML usando Javascript

By
nmda
– October 20, 2010Posted in: Código

Cuando quize hacerlo busque por todos lados y no encontre un tutorial facil para hacerlo. Asi que hay va.

La idea es que cuando apretemos en un link o botón, aparezca un texto o bloque <div> en algún lugar.

Código HTML

<html>
	<head>
		<title>Insertar texto HTML usando Javascript</title>
	</head>
	<body>
		<script type="text/javascript" src="funciones.js"></script>
		<div id="mensaje"></div>
		<div onclick="mostrar();">
		Clickee Aqui!
		</div>
	</body>
</html>

Codigo Javascript (lo ponemos en un archivo .js separado por comodidad)

function mostrar() {
e=document.getElementById("mensaje");//busca el id del elemento para identificarlo
e.innerHTML="Mensaje generado con Javascript";//inserta en el html informacion
e.style.backgroundColor="#cc00FF";//le da formato
e.style.fontSize="40";
e.style.color="#fff";
e.style.fontWeight="bold";
}

Ok, primero en el HTML en el BODY creamos un script que llame a nuestro código funciones.js.

<script type="text/javascript" src="funciones.js"></script>

Después creamos un < div > en donde va a aparecer el mensaje.

<div id="mensaje"></div>

Y por ultimo un link o palabra o boton que detone la accción. Onclick ejecuta la función mostrar()

<div onclick="mostrar();">Clickee Aqui!</div>

Ahora pasamos al archivo funciones.js
Definimos la función mostrar() que es la misma que usamos en el detonador de la acción en HTML.

function mostrar() {

Después buscamos y seleccionamos el id del < div > en donde vamos a poner el mensaje por medio de document.getElementById.

e=document.getElementById("mensaje");

Y por ultimo insertamos el mensaje en ese < div > con innerHTML.

e.innerHTML="Mensaje generado con Javascript";

El resto es solamente para darle formato.

Share

Posts Relacionados:

  1. Random de imágenes con PHP+CSS Me habían pedido, que cuando entras a un sitio haya una pagina de introducción con fotos full screen que cambien cada vez que entras,...
Tags: , ,