NorfiPC
NorfiPC » Informaciones » Escribir con Javascript

Insertar, agregar o escribir texto en un DIV con Javascript en HTML

Código para agregar bloques de texto, enlaces, imágenes, marcos y cualquier otro contenido, usando las funciones document.write(), innerHTML(), appendChild() y createElement(). Ejemplos prácticos.
Como escribir con JavaScript texto y elementos en páginas web

Con JavaScript podemos hacer nuestras páginas más útiles, dinámicas, interactivas, agregándoles varias funcionalidades.
En este artículo se explica como agregarle al HTML texto y cualquier otro elemento, insertándolos de forma pasiva o dinámicamente, mediante la interacción de los lectores.
No es necesario conocimientos avanzados, solo leer y apoyarse en los ejemplos.


Funciones usadas para escribir con JavaScript


Existen varias funciones en JavaScript que permiten escribir contenido en el HTML de las páginas.
De ellas explico cómo usar document.write(),document.writeln(), innerHTML() y appendChild().
Los dos primeras cada vez son menos usadas, porque escriben el contenido solo al cargar la página, si son llamados posteriormente, será necesario volverla a cargar.
La función innerHTML y el método appendChild, permiten agregar los elementos de forma dinámica, sin tener que recargar, por lo que son ideales y los más empleados actualmente.

Escribir con document.write en HTML


La función document.write() de JavaScript permite escribir en una página texto, el resultado de una función o ambos.
Se utiliza de cualquiera de las siguientes formas:
document.write('texto');
document.write(+funcion);
document.write(+1raFuncion+2daFuncion);
El resultado aparecerá en el lugar exacto de la página donde se inserte el código.
Lógicamente, este código debe ir encerrado entre dos etiquetas <script> para que el navegador lo interprete como tal.
El texto encerrado entre comillas será escrito literalmente.
Si no se usan comillas se asumirá que es una variable, esta debe estar antecedida por el signo: +
Algunos ejemplos a continuación.

Escribir texto y variables con document.write(). Ejemplos prácticos


El primer código de ejemplo escribe en la página con document.write(), el texto 'Hola'.
<script>
document.write('Hola');
</script>
Resultado:

A continuación se escribe el resultado de la variable "screen.width", que devuelve el ancho de la pantalla en pixeles.
<script>
document.write(+screen.width);
</script>
Resultado:

Ahora se escribe texto y el resultado de la variable.
Se debe observar que el texto está encerrado en comillas simples y la variable posee un signo de más a cada lado.
<script>
document.write('Ancho de la pantalla: '+screen.width+' pixeles');
</script>
Resultado:

Asi se escribe fecha de la última modificación de esta página.
<script>
document.write('Ultima modificación: '+window.document.lastModified)
</script>
Resultado:
He usado CSS para darle otro color al resultado de cada código, para que resalte.


Otros usos de document.write

La función document.write se usa en algunos sitios para escribir elementos en las páginas, pero solo después que estas terminen de cargar, usando el evento "onload".
Se usa generalmente para escribir imágenes y otros elementos y que no afecten la representación del contenido.
Se usa de la siguiente forma:
<script>
window.onload = document.write('<img src="ruta-imagen.jpg">')
</script> 
De forma similar a la anterior se puede escribir el resultado de muchas variables, texto y también elementos.
No obstante en la web moderna no se recomienda usar document.write(), porque perjudica el rendimiento de la página.


Escribir con innerHTML en páginas web


La función innerHTML se emplea para escribir de forma dinámica, cualquier contenido.
No es necesario recargar la página y generalmente se usa mediante un evento, que puede ser un enlace, un botón, dar clic en una sección o
Es imprescindible para usarla identificar primeramente el elemento donde se va a escribir.
La forma más fácil de hacerlo es asignar a un elemento un identificador o ID.
Después de eso podemos usar "document.getElementById()" y escribir el contenido.

Escribir con innerHTML un párrafo al dar clic en un enlace


En el siguiente ejemplo explico los pasos para crear un párrafo de texto en un contenedor creado previamente y nombrado "cont1", al hacer clic en un enlace.
1- Crear un contenedor en el lugar exacto que deseamos que se escriba el párrafo de texto.
<div id="cont1"></div>
2- Enlace que inicia la función.
<a href="javascript:escribir()">Escribir</a>
3- Código de la función.
Se puede situar en cualquier parte del HTML, preferentemente antes del cierre de la etiqueta </body>
<script>
function escribir(){
document.getElementById('cont1').innerHTML='Párrafo de texto';
}
</script>
Pruébalo: Escribir párrafo con innerHTML

Reducir el código necesario

En caso de funciones sencillas, podemos incluirla dentro de la propiedad HREF del enlace o evento que la inicia, para ahorrarnos código.
Para el ejemplo anterior, el código necesario seria el siguiente.
<a href="javascript:void(document.getElementById('cont1').innerHTML='Párrafo de texto escrito en el contenedor, usando innerHTML');">Escribir</a>
Pruébalo: Escribir
El parámetro "void" necesario, evita que el navegador siga el enlace como si se tratara de una dirección URL.


Escribir texto de forma dinámica con innerHTML


En el siguiente ejemplo se escribe forma dinámica en tiempo real, en un contenedor con la identidad "cont3", el texto que se introduce en un cuadro, usando el evento de JavasCript "onkeyup"
Onkeyup es un evento del teclado que se dispara y ejecuta una función, cada vez que se presiona una tecla.
<input id="entrada" onkeyup="escribir2()">
<div id="cont3"></div>
<script>
function escribir2() {
valor = document.getElementById('entrada').value;
document.getElementById('cont3').innerHTML=' '+valor;} 
</script>
Pruébalo.


Son casi infinitas las posibilidades y combinaciones posibles.
De forma similar a la anterior podemos escribir en una página, texto, pero también elementos como enlaces, imágenes, marcos (iframes) de publicidad, videos, etc.
A continuación un ejemplo de cómo usarlo para escribir una imagen a petición del lector.


Escribir con innerHTML fotos o imágenes


Las imágenes de alta resolución al igual que los videos, hacen más lentas y pesadas las páginas y además consumen ancho de banda del lector y recursos del servidor.
Con innerHTML podemos escribir cualquier de estos elementos, solo a petición del lector, usando un enlace o un botón.
En el siguiente ejemplo al dar clic en el botón, se escribe una foto con innerHTML en el contenedor con la identidad "cont2".
<div id="cont2"></div>
<button type="button" onclick="mostrarimg()">Mostrar foto</button>
<script>
function mostrarimg(){
document.getElementById('cont2').innerHTML='<img src="ruta-foto.jpg">';
}
</script>
Pruébalo.



Escribir con innerHTML enlaces o marcos (iframe)


En muchos sitios se usa innerHTML para escribir en las páginas enlaces y marcos, que no son bien vistos por los buscadores.
Para eso aprovechan que los robots de estos no miran en el interior de las etiquetas script.
De esta forma se puede escribir el código para insertar enlaces de afiliados, iframes que encierran publicidad y otros objetos.
Este contenido se escribe de forma similar que los ejemplos anteriores, pero generalmente se usa un evento que se dispara después que la página ha terminado de cargar.
Uno de ellos es el evento "onload", pero actualmente se recomienda usar el método "addEventListener" y el evento "DOMContentLoaded".
En otro artículo explico cómo hacerlo: JavaScript, cargar elementos de una página después de finalizar el DOM

Usar en JavaScript appendChild y createElement


Los métodos de JavaScript appendChild() y createElement(), permiten agregar elementos y contenido en una página.
Sus aplicaciones en la práctica son diversas.
Ambos se complementan y son más poderosos que innerHTML, pero requieren de más código.
A continuación muestro solo algunos ejemplos sencillos de su empleo elemental, porque su uso requiere un completo tutorial.


Escribir contenido en páginas con appendChild()

El método de JavaScript appendChild(), se usa para agregar contenido en el HTML.
En el siguiente ejemplo agregamos un párrafo de texto a uno ya existente.
<p id="cont4">Texto existente</p>
<button type="button" onclick="agregartxt1()">Agregar texto</button><br>
<script>
function agregartxt1(){                
var text = document.createTextNode(". Esto es un nuevo parrafo agregado con appendChild()");                                    
document.getElementById("cont4").appendChild(text); 
}                            
</script>

Texto existente


En JavaScript existen otros métodos similares como removeChild() y replaceChild().


Escribir nuevos elementos con createElement()


El método de JavaScript createElement(), se usa para agregar nuevos elementos en el HTML.
Se pueden crear contenedores, botones, imágenes y cualquier otro.
También se puede establecer el estilo de dichos elementos.
Además permite escribir dinámicamente scripts y cargarlos desde sitios externos.
Es muy usado en aplicaciones, extensiones y Bookmarklets.
Esta última características de inyectar scripts externos, puede ser muy peligrosa.

Ejemplos prácticos del método createElement()


Escribir un contenedor con createElement()

En este ejemplo al presionar el botón "Escribir DIV", se crea un nuevo contenedor encima de uno existente con el identificador "cont5".
Se le agrega una regla de estilo CSS y la línea de texto: "Nuevo contenedor".
<script>
function agregartxt2(){
var newt = document.createElement("div");
newt.style.cssText='border:8px solid #56aaf3;padding:12px;width:160px;margin:12px 0 12px 0;';                 
var t = document.createTextNode("Nuevo contenedor");       
newt.appendChild(t);                                         
document.getElementById("cont5").appendChild(newt); 
}                            
</script>
<button type="button" onclick="agregartxt2()">Escribir DIV</button><br>
<div id="cont5"></div>
Pruébalo.


Usar createElement() en enlaces

A continuación dos enlaces que usan createElement() para escribir en esta página.
Usan las funciones inline del mismo modo que los Bookmarklets.
Al dar clic en el primero, este le agrega una línea de texto al título de esta página.
<a href="javascript:(function(){
var newdoc = document.createElement('div');                 
var t = document.createTextNode('Esto se agrega al titulo de esta pagina');       
newdoc.appendChild(t);                                         
document.getElementsByTagName('h1')[0].appendChild(newdoc);
})();">Agregar al titulo</a>
Pruébalo.
Agregar al titulo
Ir al tÍtulo.

Al dar clic en el siguiente enlace, se crea un contenedor flotante en esta página.
<a href="javascript:(function(){var flotante=document.createElement('div');flotante.style.cssText='position:fixed;top:50px;left:30px;border:8px solid #56aaf3;padding:12px;float:left;width:160px;';var t = document.createTextNode('Cuadro flotante');flotante.appendChild(t);
document.getElementsByTagName('body')[0].appendChild(flotante);})();">Cuadro flotante</a>
Pruébalo.
Cuadro flotante

Cargar scripts externos con createElement()

Con el siguiente código se muestra como usar createElement() para cargar un script externo, en este caso es inofensivo, se trata de JQuery, librería de JavaScript que permite agregar multitud de funciones.
<a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://code.jquery.com/jquery-1.7.2.min.js'})();">Cargar script externo</a>

Escapar o codificar caracteres en errores
Al usar el código JavaScript inline o sea dentro de las propiedades HREF de los enlaces o ONCLICK de botones, será tratado como una dirección URL, por lo que debemos percatarnos que no contenga caracteres no admitidos, ni espacios.
De ser así es necesario escaparlo o sustituirlos por caracteres hexadecimales que le correspondan.
Para eso usa la siguiente herramienta: Escapar y codificar caracteres a hexadecimal

Páginas relacionadas