4. LENGUAJE DEL LADO DEL CLIENTE

Unidad 4 Lenguaje de lado del cliente

4.1 Lenguaje de lado del cliente

El navegador es una especie de aplicación capaz de interpretar las órdenes recibidas en forma de código HTML fundamentalmente y convertirlas en las páginas que son el resultado de dicha orden.
Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (un ordenador que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).
Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él. Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan un pretratamiento.

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas. Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.
Lenguajes del lado cliente

HTML

El lenguaje llamado HTML indica al navegador donde colocar cada texto, cada imagen o cada video y la forma que tendrán estos al ser colocados en la página.

El lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto está en negrita</B>.

JAVASCRIPT

Javascript es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web. Se trata de un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Su uso se basa fundamentalmente en la creación de efectos especiales en las páginas y la definición de interactividades con el usuario.

Las sentencias escritas en javascript se encapsulan entre las etiquetas <script> y </script>. por ejemplo, si en el código de una página Web incluimos la sentencia

<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>

APPLETS DE JAVA

Es otra manera de incluir código a ejecutar en los clientes que visualizan una página web. Se trata de pequeños programas hechos en Java, que se transfieren con las páginas web y que el navegador ejecuta en el espacio de la página.

Los applets de Java están programados en Java y precompilados, es por ello que la manera de trabajar de éstos varía un poco con respecto a los lenguajes de script como Javascript. Los applets son más difíciles de programar que los scripts en Javascript y requerirán unos conocimientos básicos o medios del lenguaje Java.

La principal ventaja de utilizar applets consiste en que son mucho menos dependientes del navegador que los scripts en Javascript, incluso independientes del sistema operativo del ordenador donde se ejecutan. Además, Java es más potente que Javascript, por lo que el número de aplicaciones de los applets podrá ser mayor.

Como desventajas en relación con Javascript cabe señalar que los applets son más lentos de procesar y que tienen espacio muy delimitado en la página donde se ejecutan, es decir, no se mezclan con todos los componentes de la página ni tienen acceso a ellos. Es por ello que con los applets de Java no podremos hacer directamente cosas como abrir ventanas secundarias, controlar Frames, formularios, capas, etc.

VISUAL BASIC SCRIPT

Es un lenguaje de programación de scripts del lado del cliente, pero sólo compatible con Internet Explorer. Es por ello que su utilización está desaconsejada a favor de Javascript.

Está basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto su sintaxis como la manera de trabajar están muy inspirados en él. Sin embargo, no todo lo que se puede hacer en Visual Basic lo podremos hacer en Visual Basic Script, pues este último es una versión reducida del primero.

El modo de funcionamiento de Visual Basic Script para construir efectos especiales en páginas web es muy similar al utilizado en Javascript y los recursos a los que se puede acceder también son los mismos: el navegador.

FLASH

Flash es una tecnología, y un programa, para crear efectos especiales en páginas web. Con Flash también conseguimos hacer páginas dinámicas del lado del cliente. Flash en realidad no es un lenguaje; Sin embargo, si tuvieramos que catalogarlo en algún sitio quedaría dentro del ámbito de las páginas dinámicas de cliente.

Para visualizar las "películas" Flash, nuestro navegador debe tener instalado un programita (plug-in) que le permita visualizarlas. 

CSS

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores... Incluso podemos definir nuestros propios estilos en un archivo externo a nuestras páginas; así, si en algún momento queremos cambiar alguno de ellos, automáticamente se nos actualizarán todas las páginas vinculadas de nuestro sitio.

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.

4.2 Modelo de objetos con lenguaje script

La programación orientada a objetos se ha  popularizado enormemente en  los  últimos  días, y  ya resulta difícil encontrar lenguajes de programación  que no  tengan una versión  o que no  estén basados  en esta filosofía. JavaScript no  se queda al  margen de  esta tendencia, y  aunque  no permite dos de las características clásicas de los lenguajes orientados a objetos ni la herencia ni el polimorfismo, sí permite la creación y manipulación de objetos sencillos, y la definición de métodos y propiedades para dichos objetos.

El DOM es una jerarquía de objetos predefinidos que describen los elementos de la página web que está mostrando el navegador, así como otras características del proceso  de  navegación como son  el  historial, el  tamaño de la ventana  de  navegación o el contenido de la barra de estado del navegador.

Un objeto es, en el fondo, un conjunto de variables y funciones que actúa sobre dichas variables, encapsuladas en un mismo paquete. El acceso a las funciones y a las variables se realiza mediante una interfaz bien definida que aísla al programador de  la necesidad  de  conocer cómo están  implementadas  internamente dichas  funciones. De este modo, la programación  orientada  a objetos  resulta muy  intuitiva, y  más  próxima  al  conocimiento humano. Como vemos  en  el  siguiente  ejemplo de  JavaScript,  para escribir  un  mensaje en  un  cuadro de diálogo utilizamos:

window.alert(“¡Hola mundo!”)

Si bien no conocemos como funciona internamente la función alert(), sabemos cómo invocarla. La abstracción es tal que nos basta con saber que se trata de una función del objeto window. A estas funciones se las llama métodos, y a las variables propiedades.

Objeto  Window 

Es  el  objeto  principal. Define la ventana sobre la que  estamos  trabajando  e incluye los objetos referentes a la barra de tareas, el documento o la secuencia de direcciones de la última sesión. Aún cuando el objeto se llame Window, disponemos siempre de una referencia a él  llamada window, y  todas  las  propiedades  y  métodos  que l amamos  sin utilizar ninguna referencia, en realidad se hacen utilizando esa referencia window. Este hecho  es común a todos los objetos del Modelo.  Los métodos más comunes del objeto son los siguientes:

1.   open(URL, nombre, propiedades).Permite crear  y  abrir  una nueva  ventana. Si  queremos tener acceso a ella desde la ventana donde la creamos deberemos asignarle una variable, si  no  simplemente invocamos  el  método: el  navegador automáticamente sabrá que pertenece al objeto window. El parámetro URL es una cadena que contendrá la dirección de  la ventana que estamos  abriendo: si  está en  blanco, la ventana  se abrirá con  una página en blanco. El nombre será el que queramos que se utilice como parámetro de un TARGET y las propiedades son una lista separada por comas de algunos de los siguientes elementos:

• toolbar[=yes|no]
• location[=yes|no]
• directories[=yes|no]
• status[=yes|no]
• menubar[=yes|no]
• scrollbars[=yes|no]
• resizable[=yes|no]
• width=pixels
• height=pixels

2.   close() . Cierra la ventana, esta mostrará al usuario una ventana de confirmación para que decida él  si  quiere o  no  cerrarla,  esto  se  hace  por  motivos  de  seguridad.

3.  alert(mensaje).Muestra una ventana de diálogo con el mensaje especificado.

4. confirm(mensaje).Muestra una ventana  de  diálogo con  el  mensaje especificado y  dos botones. Si el usuario pulsa OK, el método devuelve true. Si, en cambio, pulsa Cancelar, devolverá false.

5. prompt(mensaje, sugerencia). Muestra una  ventana de  diálogo  con el  mensaje especificado y un campo de texto en el que el usuario pueda teclear, cuyo valor inicial será igual a sugerencia. Si el usuario pulsa OK, el método devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa Cancelar, devolverá el valor null.

Dado que este valor se considera igual a false, podemos comprobarlo directamente en una condición para ver que ha hecho el usuario.

Por ejemplo, el siguiente código muestra un saludo sólo si el usuario ha pulsado el botón de Aceptar:

var contestacion = prompt(“¿Cómo te llamas?”, “”); 

if (contestacion) 

alert(“Hola, ” + contestacion);

6.   status.Define la cadena de caracteres  que saldrá en la barra de  estado  en  un momento dado.

7.     defaultStatus. Define  la cadena de caracteres  que saldrá por  defecto en  la barra de estado. Cuando no  la especificamos, defaultStatus  será igual  al  último valor que tomó status.

8.     setTimeout(“función”,tiempo).  Llama      a     función  cuando          hayan  pasado  tiempo milisegundos. Imprescindible a la hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.

Objeto  Frame: Para acceder  al  código  o a objetos  como Window  o Document de  otros  frames, Javascript utiliza  el  objeto  Frame  con  las  etiquetas  FRAME  y  FRAMESET, este objeto permite acceder a los  frames  que hemos  declarado en él  por medio del  arreglo  frames. Es  decir, si  en nuestro documento estuviera la siguiente línea:

<FRAME NAME=”principal” SRC=”MiPagina.html”> 

Podríamos acceder a su objeto Window por medio de la referencia window.frames[“principal”], a su vez, desde el  documento “hijo”, es  decir, desde  el  documento que está encerrado en  un  marco, podemos  acceder al  padre por  medio  de  la referencia parent. También  podemos  acceder al documento que esté arriba del todo en esta jerarquía por medio de top. Por ejemplo:

window == window.top

Esta igualdad comprobará si nuestro documento está en la ventana principal o en un frame.

Objeto Document

Este objeto representa el documento HTML en el que estamos. Se accede a él por medio de la referencia document. Su mayor importancia viene por el número de  arreglos que posee, que referencian a objetos Image, Form o Link, los cuales permiten acceder a las imágenes, formularios y enlaces del documento, respectivamente.  Entre sus métodos y propiedades más importantes se encuentran los siguientes:

1.   lastModified. Contiene la fecha y hora en que se modificó el documento por última vez y se suele usar en  conjunción  con write para añadir  al  final  del  documento estas características.

2.     bicolor. Modifica el  color  de  fondo del  documento.  El  color  deberá  estar en  el  formato usado en HTML. Es decir, puede ser red o FF0000.

3.   forms[]. Arreglo que contiene los formularios del documento. El primero será el número 0, el segundo el 1, etc.

4.   images[]. Arreglo que contiene las imágenes del documento. Se ordenan igual que en el anterior caso, aunque  también permiten  ser accedidas  con  el  nombre como índice.  Es decir, a una imagen definida como <IMG SRC=”..” NAME=”miImagen”> se puede acceder con document.inages[“miImagen”].

5.     links[]. Arreglo que contiene los enlaces del documento. Se ordenan igual que en los dos anteriores, aunque no se suele utilizar en el código Javascript. Su razón de ser es que, al ser los enlaces objetos, permiten incluir código Javascript en ellos por medio de la pseudo-URL javascript:codigo.

6.   write(cadena) writeln(cadena). Escribe  el  código  HTML  indicado en cadena en nuestro documento HTML. writeln hace lo mismo, pero incluyendo al final un retorno de carro.

7.   open(). Abre un  nuevo documento para escribir. Un  documento debe  estar abierto para poder escribir en él. Sin embargo, no se utiliza mucho ya que los dos métodos anteriores abren automáticamente el documento si no lo está ya.

8.   close(). Cierra el documento, impidiendo escribir de nuevo en él.

Objeto Image. Este objeto representa a una imagen. Se puede acceder a las diversas imágenes del documento por medio del arreglo de referencias document.images[]. Sus propiedades más importantes son:

1.  src. Contiene el archivo de la imagen.

2.  complete. Valor lógico que  será true  si  la imagen  ha  terminado  ya de  cargarse.

También  dispone de diversas  propiedades  de sólo  lectura que  se  corresponden  con  los atributos de la etiqueta <IMG> como, por ejemplo, width o border.

Objeto Form 

Cada forma en un documento crea un objeto Form, Porque un documento puede contener más de una forma. Los objetos Forma son almacenados en un arreglo llamado forms. La primer forma en la página es forms[0] y así sucesivamente. Los métodos y propiedades más importantes del objeto Form son los siguientes:

1.   submit(). Envía el formulario.

2.   reset(). Devuelve los valores de un formulario a su estado inicial.

3.   elements[]. Contiene todos  y  cada  uno de los  elementos  de  los  que consta el formulario, es  decir, los  botones, cajas  de  textos, listas  desplegables, etc.  que componen un  formulario. Cada  elemento puede  ser  un  objeto  distinto, por  lo que deberemos averiguar de qué tipo son por medio de la propiedad común type.

Objetos Text 

Cuatro elementos  HTML  distintos  (text, textarea, password y  hidden) son, objetos muy parecidos entre sí. Tienen tres propiedades verdaderamente importantes:

1.   name. Nombre del elemento, indicado en el atributo NAME de su etiqueta HTML. Este atributo está presente en todos los objetos que son elementos de un formulario.

2.   type. Tipo del elemento. Al igual que el anterior, esta propiedad está presente en todos los objetos que representan elementos de un formulario. En este caso valdrá siempre “text”.

3.   value. Contiene el valor, es decir, el texto tecleado por el usuario.

Objetos Checkbox y Radio. En estos objetos el estado del elemento es de tipo lógico: puede estar seleccionado o no. Este valor lógico se contiene en la propiedad checked

Objetos Select y  Option 

El  objeto  Select es  el  más  complicado. Esto es  debido  a que contiene en su interior un arreglo de objetos Option. Dispone de dos propiedades:

1.   selectedIndex. Empezando  a contar  a  partir  de  cero, indica qué  opción está seleccionada. Si hay varias seleccionadas, indica la opción con el índice más bajo.

2.   options[].  Arreglo  que contiene  los  objetos  Option  correspondientes  a todas  y  cada una de las opciones.  El objeto Option, por otro lado, dispone de otras dos propiedades:

1.   selected. Valor lógico que será verdadero si la opción está seleccionada.

2.   text. Texto que acompaña a la opción.  Otros  objetos. El  modelo de  objetos  del  documento define  varios  objetos, por  así decirlo, “menores”, que no tienen relación con nada físico de la página en la que estamos. Es decir, no guardan relación con las etiquetas HTML que estén en ellas escritas. Son los siguientes:

Objeto  History 

Se accede a  este  objeto por  medio  de  la referencia document.history  y contiene  todas  las  direcciones  que se han visitado  en  la sesión  actual. Aunque no permite acceder a él, dispone de varios métodos para sustituir el documento actual por alguno que el usuario ya haya visitado:

1.   back(). Volver a la página anterior, la sintaxis para utilizarlo es la siguiente: window.history.back();

2.   forward(). Ir a la página siguiente.

3.   go(donde). Ir  a donde  se indique, siendo donde  un  número tal  que go(1)=forward()  y go(-1)=back().

Objeto  Location

Se accede a este objeto por  medio de  la referencia document.location y contiene información sobre la dirección de la página actual en varias propiedades.

1.     href.-  Permite el  acceso  a la dirección de la página  actual. Si  lo  cambiamos cambiaremos de página.

2.   protocol.-   Protocolo de la página actual. Habitualmente http.

3.   host.- Máquina donde se alberga la página actual.

4.   pathame.- Camino de la página actual

5.   search.- Esta propiedad permite acceder a la última parte de la dirección, a partir de la interrogación,  que  son los  parámetros. Puede  ser útil  para pasar parámetros  de  una página a otra.

Objeto  Screen 

Se puede acceder a este objeto  por  medio de la referencia  screen.  Nos permitirá conocer la configuración  de la pantalla del  usuario, todos  sus  atributos  son  de  sólo lectura.

1.   height: Altura de la resolución de la pantalla.

2.   width: Anchura de la resolución de la pantalla.

3.   pixelDepth: Número de bits por pixel.

4.3 Manipulacion de objetos

Una página web es un documento HTML que es interpretado por los navegadores en forma gráfica, pero también permiten el acceso al código. El Modelo de Objetos del Documento (DOM) permite ver el mismo documento de otra manera, describiendo el contenido del documento como un conjunto de objetos que un programa Javascript puede actuar sobre ellos. 

¿Qué es el Modelo de Objetos del Documento? 

Acorde al W3C el Modelo de Objetos del Documento es una interfaz de programación de aplicaciones (API) para documentos validos HTML y bien construidos XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula.

El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto. Para comprender más fácilmente véase el siguiente ejemplo: 

<body>
<p>Esto es un párrafo que contiene <a href="#">un enlace</a> en el medio. </p>
<ul>
<li>Primer punto en la lista</li>
<li>Otro punto en la lista</li>
</ul>
</body> 

Como puede verse un elemento [a] se encuentra localizado dentro de un elemento [p] del HTML, convirtiéndose en un nodo hijo, o simplemente hijo del nodo [p], de manera similar [p] es el nodo padre. Los dos nodos li son hijos del mismo padre, llamándose nodos hermanos o simplemente hermanos.

Es importante comprender la diferencia entre elementos y nodos de textos. Los elementos comúnmente son asociados a las etiquetas. En HTML todas las etiquetas son elementos, tales como <p>, <img> y <div> por lo que tienen atributos y contienes nodos hijos. Sin embargo, los nodos de textos no poseen atributos e hijos.
Siempre use el DOCTYPE correcto

El DOCTYPE (abreviado del inglés “document type declaration”, declaración del tipo de documento) informa cual versión de (X)HTML se usará para validar el documento; existen varios tipos a seleccionar. El DOCTYPE, debe aparecer siempre en la parte superior de cada página HTML y siendo un componente clave de las páginas web “obedientes” a los estándares.

En caso de usarse un DOCTYPE incompleto, no actualizado o simplemente no usarlo llevará al navegador a entrar en modo raro o extraño, donde el navegador asume que se ha programado fuera de los estándares.

Todavía todos los navegadores actuales no son capaces de procesar correctamente todos los tipos de documentos, sin embargo, muchos de ellos funcionan correctamente en los navegadores más utilizados actualmente, tales como:

HTML 4.01 Strict y Transitional, XHML 1.0 Strict y Transitional los se comportan del modo correcto en Internet Explorer (versión 6, 7 Beta), Mozilla y Opera 7. De ahora en adelante se adoptará para cada ejemplo 

HTML 4.01 Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

Resultando una única línea de código, o dos líneas con un salto de línea después de EN”.
La importancia de validar el HTML

Si los elementos son anidados de manera inadecuada pueden generarse problemas, véase la siguiente línea:

 <p>Estos elementos han sido <strong>incorrectamente </p>anidados </strong>

El árbol que resulta de esto se encuentra incorrectamente anidado del todo, por tanto generará errores inesperados en los navegadores. Manteniendo su HTML válido se pueden evitar tales problemas.
Accediendo a los elementos

Afortunadamente, Javascript permite acceder a cada uno de los elementos de una página utilizando tan sólo algunos métodos y propiedades.

Si desea encontrar de manera rápida y fácil un elemento se tiene a la mano el método getElementById. El mismo permite un acceso inmediato a cualquier elemento tan sólo conociendo el valor de su atributo id. Véase el siguiente ejemplo: 

<p>
<a id="contacto" href="contactos.html">Contáctenos</a>
</p>

Puede usarse el atributo id del elemento a para acceder al mismo: 

var elementoContacto = document.getElementById("contacto");

Ahora el valor de la variable elementoContacto está referida al elemento [a] y cualquier operación sobre la misma afectará el hiperenlace.

El método getElementById es adecuado para operar sobre un elemento en específico, sin embargo, en ocasiones se necesita trabajar sobre un grupo de elementos por lo que en este caso puede utilizarse el método getElementsByTagName. Este retorna todos los elementos de un mismo tipo. Asumiendo la siguiente lista desordenada: 

<ul>
<li><a href="editorial.html">Editorial</a></li>
<li><a href="semblanza.html">Autores</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="contactos.html">Contátenos</a></li>
</ul>

Puede obtenerse todos los hipervínculos de la siguiente manera: 

var hipervinculos= document.getElementsByTagName("a"); 

El valor de la variable hipervinculos es una colección de elementos [a]. Las colecciones son arreglos pudiéndose acceder a cada elemento a través de la ya conocida notación con corchetes.

Los elementos devueltos por getElementsByTagName serán ordenado según el orden que aparezcan en el código fuente. Por tanto para el caso anterior quedaría así:

hipervinculos[0] el elemento [a] para “Editorial”
hipervinculos[1] el elemento [a] para “Autores”
hipervinculos[2] el elemento [a] para “Noticias”
hipervinculos[3] el elemento [a] para “Contáctenos” 

Otra maneras de acceder a un elemento usando su id es document.all["id"] la cual fue introducida en Internet Explorer 4 y document.layers["id"] introducida por Netscape 5 por que el W3C todavía no había estandarizado la manera de acceder a los elementos mediante su id. Sin embargo, no se recomienda su uso porque al estar fuera de los estándares actuales hay navegadores que no soportan estos métodos.

Por otro lado existen varios elementos en un documento HTML que pueden ser accedidos de otras maneras. El elemento body de un documento puede accederse a través de la forma document.body, mientras que el conjunto de todos los formularios en un documento puede encontrase en document.forms, así mismo el conjunto de todas las imágenes sería mediante document.images.

Actualmente la mayoría de los navegadores soportan esto métodos aún así es recomendable el uso del método getElementsByTagName, véase el siguiente ejemplo para acceder al elemento body: 

var body = document.getElementsByTagName("body")[0]; 
Creando elementos y textos

La creación de nodos es posible mediante el uso de dos métodos disponibles en el objeto document. Dichos métodos son: 

createElement(Tipo cadena): Crea un nuevo elemento del tipo especificado y devuelve un referencia a dicho elemento.

createTextNode(Cadena de texto): Crea un nuevo nodo de texto con el contenido especificado en la cadena de texto.

El siguiente ejemplo muestra cómo se crea un nuevo elemento de párrafo vacío: 

var nuevoEnlace = document.createElement("a"); 

La variable nuevoEnlace ahora referencia un nuevo enlace listo para ser insertado en el documento. El texto que va dentro del elemento [a] es un nodo de texto hijo, por lo que debe ser creado por separado.

 var nodoTexto = document.createTextNode("Semblanza");

Luego si desea modificar el nodo de texto ya existente, puede utilizarse la propiedad nodeValue, esta permite coger y poner el nodo de texto: 

var textoViejo = nodoTexto.nodeValue;
nodoTexto.nodeValue = "Novedades";

El valor de la variable textoViejo es ahora "Semblanza" y el nuevo texto "Novedades". Se puede insertar un elemento o texto (nodo) como último hijo de un nodo ya existente usando el método appendChild. Este método coloca el nuevo nodo después de todos los hijos del nodo. NuevoEnlace.appendChild(nodoTexto);

Ahora todo lo que se necesita es insertar el enlace en el cuerpo del documento. Para hacer esto, se necesita una referencia al elemento body del documento, teniendo como guía los estándares siguientes: 

var cuerpoRef = document.getElementsByTagName("body")[0];
cuerpoRef.appendChild(nuevoEnlace); 

Otra manera sería utilizando el método getElementById. Para ello se asume que la etiqueta 

<body> tiene asignado un valor para el atributo id. <body id=”cuerpo”>
var cuerpoRef = document.getElementById("cuerpo");
cuerpoRef.appendChild(nuevoEnlace); 

Existen básicamente tres maneras mediante las cuales un nuevo elemento o nodo de texto puede ser insertado en una página Web. Todo ello depende del punto en el cual se desee insertar el nuevo nodo: como último hijo de un elemento, antes de otro nodo o reemplazo para un nodo.