Para poder entender y trabajar con DHTML debemos conocer y entender HTML, JavaScript y CSS. Estas tres tecnologías son indispensables para introducirse en el mundo de DHTML (HTML dinámico).
Si ya realizó los cursos de CSS , JavaScript  seguro que está en condiciones de entender este tutorial.

DHTML tiene por objetivo aumentar la funcionalidad de un sitio web. Se puede utilizar para crear animaciones, menúes desplegables, mostrar y ocultar partes de una página luego que la página fue cargada completamente, crear un entramado de capas que con sólo el HTML y CSS sería imposible alcanzar. Si bien la funcionalidad de DHTML se puede duplicar con otras herramientas como los Applet de Java o Flash, el DHTML ofrece la ventaja de que no requiere ningún tipo de plug-in para poder utilizarlo.

DHTML ofrece a los creadores de páginas web la posibilidad de modificar, cambiar la apariencia, ocultar, mostrar y animar el contenido dinámicamente.

Con DHTML podemos, luego de cargada la página en el navegador, acceder a cada una de las marcas HTML modificar sus atributos, ocultarlas, volverlas a mostrar y acceder al estilo definido para dicha marca.
Debe quedar bien en claro que DHTML no es un lenguaje nuevo sino la combinación de HTML, CSS y JavaScript.
El DHTML es otro de los escalones que debemos dominar para poder introducirnos en el mundo de AJAX.

Para poder aplicar los conceptos de DHTML debemos conocer a la perfección el DOM (Document Object Model - Modelo Objeto Documento)
El DOM es otra forma para representar una página web. Para entender que es el DOM veamos tres tipos de personas frente a una página web:

1 - Un usuario de internet que conoce muy poco sobre el mundo de la computación, ve una página web como una ventana que contiene texto con distintos tamaños y colores, imágenes, enlaces etc. esto es lo que ve un usuario común de internet.

2 - Ahora veamos como ve una página web una persona que se ha iniciado hace muy poco en el mundo del diseño de páginas web, este usuario ve un poco más allá de lo que ve un usuario común, puede identificar que texto dispuso en la marca title del documento, si utilizó tablas para formatear datos de la página o empleó CSS o ambas. Si incorporó algun aplique Flash etc. Este segundo tipo de personas puede imaginar el contendino HTML y CSS de la página.

3 - Ahora por último, para un programador de sitios web tiene una visión mucho más profunda, puede decir si la página según su interactividad tiene apliques de programación.


Este último tipo de persona puede identificar más allá del código HTML y CSS de la página, intuye perfectamente si hay programación por detrás del esqueleto HTML y la definición de las hojas de estilo.

Este tercer tipo de persona debe conocer perfectamente el DOM.
Entonces que es el DOM?
El DOM es otra forma de ver el contenido de la página. Con el DOM, todos los elementos HTML se insertan en un árbol cuyos nodos son las marcas HTML y las hojas, los valores propiamente dichos de las marcas. Por medio de JavaScript podemos acceder y modificar este árbol de marcas y hacer que la página varíe luego que ya se haya mostrado en el navegador. De aquí el nombre de esta tecnología DHTML es decir Dynamic Hyper Text Markup Language.

Mediante el DOM podemos acceder al contenido y estilo de cada marca del documento y modificarlo de acuerdo a algún evento.
Mediante el DOM podemos insertar, borrar, modificar marcas HTML. Podemos acceder a la hoja de estilo definida a la página y dinámicamente agregar, modificar o borrar propiedades. Todos esto sin tener que recargar la página del servidor, es decir todo se hace en el cliente (navegador) mediante JavaScript.

La primera función que nos provee el DOM a través del objeto document es:

document.getElementById("nombre del Id de la marca HTML")

Nos retorna una referencia a la marca en sí misma. Con esta referencia podemos acceder a sus propiedades como puede ser su contenido, color, fuente, etc. A esta función la emplearemos constantemente durante el curso.

Para disponer un ejemplo muy sencillo dispondremos una marca <h1> en la página y luego por medio de dos botones cambiaremos su color, y su tamaño de fuente.

El archivo html es el siguiente:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 id="titulo">Este es un título dinámico</h1> 

<input type="button" value="Cambiar Color" onClick="cambiarColor()">
<input type="button" value="Cambiar Tamaño de Fuente" 
onClick="cambiarTamanoFuente()">
</body>
</html>

Es importante notar que a los eventos para los dos botones los definimos en un archivo separado llamado funciones.js que lo incluimos con el siguiente código:

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

A la hoja de estilo también la definimos en un archivo separado que la incluimos con el siguiente código:

<link rel="StyleSheet" href="estilos.css" type="text/css">

Para poder acceder a la marca h1 debemos definir la propiedad id:

<h1 id="titulo">Este es un título dinámico</h1> 

Para capturar los eventos de los dos botones inicializamos la propiedad onclick de cada botón:

<input type="button" value="Cambiar Color" onClick="cambiarColor()">
<input type="button" value="Cambiar Tamaño de Fuente" 
onClick="cambiarTamanoFuente()">

Por otro lado definimos el archivo estilos.css:

#titulo {
  text-align:center;
}
#boton1,#boton2 {
  text-align:center;
  width:200px;
}

y el archivo funciones.js:

function cambiarColor()
{
  var tit=document.getElementById('titulo');
  tit.style.color='#ff0000';
}

function cambiarTamanoFuente()
{
  var tit=document.getElementById('titulo');
  tit.style.fontSize=60;
}

Notemos que para recuperar una referencia a la marca h1 debemos indicar el siguiente código:

var tit=document.getElementById('titulo');

Ahora, en la varible tit tenemos una referencia a la marca h1 de la página.
Si queremos cambiar el color del texto debemos acceder a la propiedad style y de ésta a la propiedad color:

tit.style.color='#ff0000';

Es similar para cambiar la fuente del título (accedemos a la propiedad fontSize):

var tit=document.getElementById('titulo');
  tit.style.fontSize=60; 

Veremos más adelante que hay diferencias de implementación en varias partes del DOM entre diferentes navegadores y es muy bueno conocerlas para cuando implementamos nuestros programas. Cada vez que aparezca una de estas diferencias las haremos notar dando un concepto para cada navegador.

Cada nodo tiene un solo nodo padre, pero puede tener muchos hijos.



En este ejemplo el nodo body tiene 4 hijos, la marca h1 tiene 1 hijo, lo mismo cada marca li tienen un hijo. Los nodos que no tienen descendientes son los nodos hoja.

El DOM provee a cada nodo de un vector que almacena la referencia a cada nodo hijo, la propiedad se llama:

childNodes

Este vector almacena una referencia a cada nodo hijo.

El siguiente ejemplo muestra como acceder a cada hijo de una marca div que contiene tres párrafos. Al presionar un botón cambiaremos el color de cada párrafo accediendo a los mismos desde el nodo div a través de la propiedad childNodes. Mostramos finalmente la cantidad de hijos que tiene la marca div.

El archivo html es:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="bloque">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="Cambiar colores" onClick="cambiarColores()">
</body>
</html>

El archivo javascript funciones.js es el siguiente:

function cambiarColores()
{
  var lista=document.getElementById('bloque');
  lista.childNodes[0].style.color='#ff0000';
  lista.childNodes[1].style.color='#00ff00';
  lista.childNodes[2].style.color='#0000ff';
  alert('La cantidad de hijos del nodo div es:'+lista.childNodes.length);
}

Es importante notar que sólo definimos la propiedad id para la marca div, ya que teniendo la referencia de éste podemos acceder a los tres hijos (los tres párrafos).

Para obtener la referencia a la marca div hacemos como lo vimos en el concepto anterior:

var lista=document.getElementById('bloque');

Luego para acceder al primer párrafo:

lista.childNodes[0].style.color='#ff0000';

Es decir, indicamos la propiedad childNodes y entre corchetes qué elemento del vector accedemos. Se numeran las componentes a partir de cero. Si queremos saber cuántos elementos tiene el vector lo hacemos mediante la propiedad length de la propiedad childNodes:

alert('La cantidad de hijos del nodo div es:'+lista.childNodes.length); 

El concepto de nodos hijo para un elemento es similar pero veremos que la cantidad de hijos que detecta un navegador y otro es distinto. Como es eso?

Si en FireFox si disponemos:

<div id="bloque">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>

Y luego le preguntamos al div cuantos hijos tiene, este nos responderá 7 (siete), recordemos que con el Internet Explorer el resultado es 3 (tres).

FireFox crea el árbol de nodos de la siguiente manera:

<div id="bloque">
<p>Este es el primer párrafo</p>

Entre la marca <div id="bloque"> y la marca <p> hay un salto de línea (crea un nodo de texto, este es el primer nodo).
Luego el primer párrafo es el segundo nodo.
Entre el primer párrafo y el segundo hay otro salto de línea (este es el tercer nodo) y así sucesivamente. Si contamos los párrafos y saltos de línea podremos contabilizar los 7 hijos.
Si no dejamos el salto de línea entre una párrafo y otro y tampoco dejamos espacios después del div y antes del cerrado del div, los hijos serán 3.
Crearemos una página con dos div que contengan tres párrafos cada uno, en uno insertaremos saltos de línea entre párrafos y en otro los dispondremos todos en la misma línea y veremos la cantidad de hijos que tiene cada div:
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="bloque1">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<hr>
<div id="bloque1"><p>Este es el primer párrafo</p><p>Este 
es el segundo párrafo</p><p>Este es el tercer párrafo</p></div>
<input type="button" value="Cambiar colores" onClick="cambiarColores()">
</body>
</html>

funciones.js

function cambiarColores()
{
  var lista1=document.getElementById('bloque1');
  alert('La cantidad de hijos del primer div es:'+lista1.childNodes.length);
  var lista2=document.getElementById('bloque1');
  alert('La cantidad de hijos del segundo div es:'+lista2.childNodes.length);
} 

Es importante notar que el texto contenido en una marca no pertenece al nodo, sino que se encuentra en otro nodo especial que lo llamaremos nodo texto.



En esta árbol de nodos podemos identificar que todos los rectángulos que no tienen bordes redondeados son nodos texto.
Ahora para acceder a dichos nodos podemos hacerlo a partir del nodo padre con la propiedad childNodes.

El siguiente ejemplo cambia el texto que contiene una marca h1 accediendo al nodo de texto.

El archivo pagina1.html es:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<h1 id="titulo">Este es el título original</h1> 
<input type="button" value="Cambiar Texto" onClick="cambiarTexto()">
</body>
</html>

El archivo funciones.js es:

function cambiarTexto()
{
  var tit=document.getElementById('titulo');
  tit.childNodes[0].nodeValue='Ahora vemos el nuevo título';
}

Como ya hemos visto rescatamos la referencia a la marca h1 por medio de la función getElementById, luego mediante la propiedad childNodes accedemos a la primer componente que tiene la referencia al nodo de tipo texto. Por último asignamos el nuevo texto a la propiedad nodeValue.

Si tenemos la referencia a un nodo podemos obtener fácilmente la referencia del nodo padre mediante la propiedad parentNode.
Veamos un ejemplo sencillo donde obtenemos la referencia de un párrafo contenido en un div. Luego por medio de esta referencia obtenemos la referencia al div y cambiamos el color de fondo del div.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div>
<p id="parrafo1">Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="Cambiar color de fondo del div" 
onClick="cambiarColor()">
</body>
</html>

funciones.js

function cambiarColor()
{
  var puntero=document.getElementById('parrafo1');
  var padre=puntero.parentNode;
  padre.style.backgroundColor='#ff0000';
}

Obtenemos la referencia del párrafo:

var puntero=document.getElementById('parrafo1');

Ahora accedemos a la propiedad parentNode de la variable inicializada previamente:

var padre=puntero.parentNode;

Finalmente modificamos el color del div:

padre.style.backgroundColor='#ff0000'; 

Si tenemos la referencia de un nodo podemos fácilmente acceder a los otros nodos que se encuentran en la misma altura dentro del árbol que genera el DOM.

Veamos con un ejemplo como obtenemos la referencia de los nodos hermanos, implementaremos una página que contenga tres párrafos y sólo disponemos el id del primero de ellos.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div>
<p id="parrafo1">Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="accediendo a los tres párrafos" 
onClick="proximoParrafo()">
</body>
</html>

funciones.js

function proximoParrafo()
{
  var puntero1=document.getElementById('parrafo1');
  alert(puntero1.childNodes[0].nodeValue);
  var puntero2=puntero1.nextSibling;
  alert(puntero2.childNodes[0].nodeValue);
  var puntero3=puntero2.nextSibling;
  alert(puntero3.childNodes[0].nodeValue);
}

El método nextSibling retorna la referencia del nodo hermano que se encuentra inmediatamente más abajo en el archivo HTML, pero a la misma altura si lo pensamos al archivo HTML como un árbol. También existe un método llamado previusSibling que retorna la referencia del nodo hermano que se encuentra inmediatamente más arriba en el archivo HTML.
nextSibling y previusSibling retornan null en caso de no existir más nodos en dicho nivel.

Recordar:Algo muy importante que hay que tener en cuenta es que firefox, a diferencia de Internet Explorer, a un espacio entre dos párrafos lo interpreta y crea un nodo de texto, inclusive un enter también creará un nodo. Para facilitar las cosas, por el momento, cuando quiera acceder a un conjunto de nodos con los métodos nexSibling y previousSibling escriba todo el texto corrido sin saltos de línea.
Por ejemplo:

<p id="parrafo1">1er párrafo</p><p>2do párrafo</p><p>3er párrafo</p>

Más adelante veremos como identificar si se trata de un nodo de tipo elemento o de tipo texto.

Habiamos visto anteriormente que podemos acceder a todos los hijos de un nodo por medio del vector childNodes. Otra forma de acceder al primer y último nodo hijo es por medio de las propiedades firstChild (retorna la referencia del primer hijo, es lo mismo que poner obj.childNodes[0]) y obj.lastChild (retorna la referencia del último hijo, es sinónimo de poner obj.childNodes[obj.childNodes.length-1])

Veamos con un ejemplo como utilizar estas dos propiedades, dispondremos tres párrafos dentro de un div y luego cambiaremos el color del primer y último párrafo (Para hacerlo compatible entre IExplorer y FireFox dispondremos todos los párrafos en la misma línea, lo mismo que el comienzo y fin del div)

pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="parrafos"><p>Este es el primer párrafo</p><p>Este es el segundo párrafo

</p><p>
Este es el tercer párrafo</p></div>
<input type="button" value="Modificar color del primer y último 
párrafo" onClick="accederParrafos()">
</body>
</html>

funciones.js

function accederParrafos()
{
  var puntero=document.getElementById('parrafos');
  puntero.firstChild.style.color='#ff0000';
  puntero.lastChild.style.color='#ff0000';
}

Primero obtenemos la referencia al div:

var puntero=document.getElementById('parrafos');

Luego con esta referencia y a través de la propiedad firstChild accedemos a la propiedad style del nodo hijo y modificamos el valor del color:

puntero.firstChild.style.color='#ff0000';

De modo similar obtenemos la referencia al último nodo hijo del div:

puntero.lastChild.style.color='#ff0000'; 

Disponemos en el objeto documento de un método llamado:

getElementsByTag("Nombre de la Marca")

Retorna un vector con la referencia a todas las marcas de dicho tipo.
A diferencia del método getElementById que retorna la referencia de una sola marca, el método getElementsByTag retorna un conjunto de referencias, las mismas se almacenan en un vector.
Confeccionemos una página que permita agregar un punto al final de cada párrafo.
La página html es:

<html>
<head>
<title>Problema</title>
<script languaje="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
<input type="button" value="Agregar un punto al final de cada 
párrafo" onClick="cambiarParrafos()">
</body>
</html>

Luego el archivo funciones.js es:

function cambiarParrafos()
{
  var lista=document.getElementsByTagName('p');
  for(f=0;f<lista.length;f++)
  {
   lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.';
  }
}

Hay que tener en cuenta que en el vector lista se almacena la referencia a todas las marcas de tipo párrafo (p) de la página. Luego para acceder al contenido de cada párrafo debemos hacerlo mediante el vector childNodes y mediante la propiedad nodeValue acceder al texto contenido en dicho párrafo. Disponemos el subíndice cero en la propiedad childNodes ya que los párrafos definidos en el ejemplo tienen como hijo sólo un texto.
Para agregar un punto al final de cada párrafo sólo debemos almacenar el contenido actual más el string '.':

for(f=0;f<lista.length;f++)
  {
   lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.';
  } 

Podemos obtener la referencia a una marca HTML, y a partir de esta referencia llamar al método getElementsByTagName visto en un concepto anterior:

var obj=document.getElementById("bloque2");
  var lista=obj.getElementsByTagName('p');

La cual retorna un vector con todas las marcas contenidas en ese bloque (es decir, no es respecto a todo el documento como el problema anterior).

Esto puede ser de gran utilidad cuando queremos hacer cambios a un conjunto de marcas similares del documento, pero que no afecten a todo el documento.
Para probar el método, agregaremos un punto al final de cada párrafo que están contenidos en una marca (div).

La página html es:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="bloque1">
<h1>Primer Bloque de párrafos.</h1>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<div id="bloque2">
<h1>Segundo Bloque de párrafos.</h1>
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="Agregar un punto al final de cada 
párrafo" onClick="cambiarParrafos()">
</body>
</html>

Agrupamos los párrafos en dos capas (div)

function cambiarParrafos()
{
  var obj=document.getElementById("bloque2");
  var lista=obj.getElementsByTagName('p');
  for(f=0;f<lista.length;f++)
  {
   lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.';
  }
}

Lo más importante del problema es ver como llamamos al método getElementsByTagName. Si queremos la referencia a todas las marcas de la página lo hacemos :

var lista=document.getElementsByTagName('p');

Si queremos la referencia a todas las marcas similares contenidas en un div lo hacemos:

var obj=document.getElementById("bloque2");
  var lista=obj.getElementsByTagName('p');

Es decir, primero obtenemos la referencia del div con id llamado bloque2 y luego, mediante el objeto devuelto, llamamos al método getElementsByTagName

Para la creación de un nodo de texto disponemos del siguiente método de la clase document:

var nt=document.createTextNode('Texto del nodo');

Para añadirlo luego a un párrafo por ejemplo debemos llamar al método appendChild:

var nparrafo=document.getElementById('parrafo');
  nparrafo.appendChild(nt);

Veamos un ejemplo en el que cada vez que se presione un botón se añada un nodo de texto a un párrafo mostrando cuántos nodos de texto se han añadido:
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<p id="parrafo">Texto inicial:</p>
<input type="button" value="Agregar nodo de texto" onClick="agregar()">
</body>
</html>

funciones.js

var contador=1;
function agregar()
{
  var nt=document.createTextNode('Nuevo texto '+contador+'-');
  var nparrafo=document.getElementById('parrafo');
  nparrafo.appendChild(nt);
  contador++;
}

A la variable contador la definimos fuera de la función para que sea global.
Cada vez que se presiona el botón creamos un nodo de texto agregándole el valor del contador:

var nt=document.createTextNode('Nuevo texto '+contador+'-');

Seguidamente obtenemos una referencia al párrafo:

var nparrafo=document.getElementById('parrafo');

finalmente añadimos el nodo de texto al párrafo:

nparrafo.appendChild(nt); 

Para eliminar un nodo de texto disponemos de una función llamada:

removeChild

Para comprender el funcionamiento de la misma implementaremos un programa que permita añadir y eliminar nodos de texto de un párrafo.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<p id="parrafo">Texto inicial:</p>
<input type="button" value="Agregar nodo de texto" onClick="agregar()">
<input type="button" value="Eliminar nodo de texto" onClick="eliminar()">
</body>
</html>

funciones.html

var contador=1;
function agregar()
{
  var nt=document.createTextNode('Nuevo texto '+contador+'-');
  var nparrafo=document.getElementById('parrafo');
  nparrafo.appendChild(nt);
  contador++;
}

function eliminar()
{
  var nparrafo=document.getElementById('parrafo');
  if (nparrafo.hasChildNodes())
  {
    nparrafo.removeChild(nparrafo.lastChild);
    contador--;
  }
}

La función agregar ya la explicamos en un concepto anterior al ver la función createTextNode.
Para eliminar un nodo de texto primero debemos obtener la referencia de una marca html, en este caso el párrafo:

var nparrafo=document.getElementById('parrafo');

Otra función importante que contiene todo nodo de tipo elemento (son los nodos que apuntan a una marca HTML, en este caso de tipo p (párrafo)) es hasChildNodes, la misma retorna true en caso que el nodo tenga nodos hijos (sean nodos de tipo texto o nodos de tipo elemento).
Es decir que mediante el siguiente if verificamos si el nodo tiene nodos texto aún:

if (nparrafo.hasChildNodes())
  {
    nparrafo.removeChild(nparrafo.lastChild);
    contador--;
  }

En caso que la condición se verifique verdadera entrará al bloque del if y se ejecutará la llamada a la función removeChild. La misma requiere una referencia al nodo texto que queremos borrar. Y lo último que aparece es la propiedad lastChild que tiene todo nodo de tipo elemento, el mismo almacena la referencia al último nodo hijo que contiene dicha marca.

Para crear nodos de tipo elemento disponemos del método createElement que contiene el objeto document:

var elemento=document.createElement

("Aca indicamos el nombre de la marca HTML a crear")

Para ver el funcionamiento confeccionemos un programa que cree un párrafo en forma dinámica y lo añada a un div.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="parrafos">
</div>
<input type="button" value="Agregar nodo tipo elemento" 
onClick="agregar()">
</body>
</html>

funciones.js

function agregar()
{
  var elemento=document.createElement('p'); 
  var texto=document.createTextNode('Hola Mundo');
  elemento.appendChild(texto);
  var obj=document.getElementById('parrafos');
  obj.appendChild(elemento);
}

En la función agregar se crea un nodo de tipo elemento:

var elemento=document.createElement('p'); 

Pero recordemos que los nodos elemento no contienen el texto, sino que hay que crear un nodo de texto y añadirlo al nodo de tipo elemento:

var texto=document.createTextNode('Hola Mundo');
  elemento.appendChild(texto);

Por último obtenemos una referencia al div y añadimos el párrafo que acabamos de crear:

var obj=document.getElementById('parrafos');
  obj.appendChild(elemento); 

En caso que necesitemos agregar un nodo entre varios que se encuentran en el mismo nivel, el método appendChild no nos servirá. Para estos casos tenemos el método insertBefore que inserta un nodo previo a otro que le pasamos como referencia en el segundo parámetro.

Supongamos que tenemos cinco párrafos todos contenidos en un div y necesitamos insertar otro párrafo entre el segundo y el tercero. Para resolver este problema debemos obtener la referencia del tercer párrafo y la del div donde se insertará nuestro nuevo párrafo.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="parrafos">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p id="p3">Este es el tercer párrafo</p>
<p>Este es el cuarto párrafo</p>
<p>Este es el quinto párrafo</p>
</div>
<input type="button" value="insertar otro párrafo entre 
el segundo y el tercero" onClick="insertarEnMedio()">
</body>
</html>

function insertarEnMedio()
{
  var elemento=document.createElement('p');
  var nodotexto=document.createTextNode('Párrafo entre segundo y tercero');
  elemento.appendChild(nodotexto);
  var puntero=document.getElementById('p3');
  var pa=document.getElementById('parrafos');
  pa.insertBefore(elemento,puntero); 
}

Lo primero es crear nuestro párrafo y un nodo texto que se lo añadimos al nodo elemento:

var elemento=document.createElement('p');
  var nodotexto=document.createTextNode('Párrafo entre segundo y tercero');
  elemento.appendChild(nodotexto);

Ahora obtenemos la referencia al tercer párrafo:

var puntero=document.getElementById('p3');

y la referencia al div:

var pa=document.getElementById('parrafos');

Por último llamamos al método insertBefore a partir de la referencia del div y le pasamos como parámetro el nodo a insertar y el nodo previo a donde se debe insertar:

pa.insertBefore(elemento,puntero); 

Para eliminar un nodo de tipo elemento disponemos del método removeChild, este método lo llamamos a partir del nodo padre.
Veamos un ejemplo que permita eliminar el primer o último nodo elemento.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="parrafos"></div>
<input type="button" value="Agregar nodo tipo elemento" 
onClick="agregar()">
<input type="button" value="Eliminar primer nodo tipo elemento" 
onClick="eliminarPrimero()">
<input type="button" value="Eliminar último nodo tipo 
elemento" onClick="eliminarUltimo()">
</body>
</html>

funciones.js

var contador=1;
function agregar()
{
  var nuevoelemento=document.createElement("p"); 
  var nuevotexto=document.createTextNode("Hola Mundo " + contador + " - ");
  contador++;
  nuevoelemento.appendChild(nuevotexto);
  var puntero=document.getElementById("parrafos");
  puntero.appendChild(nuevoelemento);
}

function eliminarPrimero()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[0]);  
}

function eliminarUltimo()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[puntero.childNodes.length-1]);  
}

La primera función nos permite crear un nodo de tipo elemento y añadirlo a otro nodo elemento de la página:

function agregar()
{
  var nuevoelemento=document.createElement("p"); 
  var nuevotexto=document.createTextNode("Hola Mundo " + contador + " - ");
  contador++;
  nuevoelemento.appendChild(nuevotexto);
  var puntero=document.getElementById("parrafos");
  puntero.appendChild(nuevoelemento);
}

Lo nuevo se encuentra en la función de eliminarPrimero:

function eliminarPrimero()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[0]);  
}

Obtenemos una referencia al nodo elemento llamado "parrafos", si este nodo tiene nodos hijos procedemos a llamar al método removeChild y le pasamos como parámetro la referencia a su primer hijo (puntero.childNodes[0]).
Este control lo hacemos para validar que el nodo tenga nodos hijo.
Para eliminar el último nodo:

function eliminarUltimo()
{
  var puntero=document.getElementById("parrafos");
  if (puntero.childNodes.length>0) 
    puntero.removeChild(puntero.childNodes[puntero.childNodes.length-1]);  
}

Enviamos como parámetro al método removeChild la referencia del último hijo al que accedemos por medio del vector childNodes. 

Hay muchas marcas HTML que pueden tener definidos atributos. Muchos de estos son casi obligatorios para su funcionamiento. Imaginemos la marca HTML <A> , si no definimos el atributo href con la dirección del sitio poco sentido tendrá incluirla en la página.

Veamos con un ejemplo como proceder a definir un atributo a un nodo de tipo elemento:
pagina1.html:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="Crear nodo tipo elemento y definir 
el atributo href" onClick="crearElementoyAtributo()">
<div id="direccion">
</div>
</body>
</html>

funciones.js:

function crearElementoyAtributo()
{
  elemento=document.createElement('a');
  var puntero=document.getElementById('direccion');
  puntero.appendChild(elemento);
  nodotexto=document.createTextNode('google');
  elemento.appendChild(nodotexto);
  elemento.setAttribute('href','http://www.google.com.ar');
}

Como funciona:
Creamos un nodo de tipo elemento:

elemento=document.createElement('a');

Obtenemos una referencia al div llamado direccion:

var puntero=document.getElementById('direccion');

Añadimos el nodo de tipo elemento al div:

puntero.appendChild(elemento);

Creamos un nodo de texto:

nodotexto=document.createTextNode('google');

Ahora añadimos el nodo de texto al nodo de tipo elemento que acabamos de crear:

elemento.appendChild(nodotexto);

Por último y lo nuevo, es definir el atributo href al ancla que acabamos de crear:

elemento.setAttribute('href','http://www.google.com.ar');

El primer parámetro es el nombre de la propiedad (en este caso href) y el segundo es el valor que toma la propiedad.

La actividad inversa de agregar un atributo a una marca HTML se logra mediante el método removeAttribute.

Para ver el funcionamiento de este método implementaremos una página que muestra dos hipervínculos, luego mediante dos botones podemos crear o eliminar el atributo href de las respectivas marcas.

pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<a id="enlace1" href="http://www.google.com.ar">Google.</a><br>
<a id="enlace2" href="http://www.yahoo.com.ar">Yahoo.</a><br>
<input type="button" value="Eliminar atributos" onClick="eliminarAtributo()">
<input type="button" value="Inicializar atributos" onClick="inicializarAtributo()">
<br>
</body>
</html>

funciones.js

function eliminarAtributo()
{
  var puntero=document.getElementById('enlace1');
  puntero.removeAttribute('href');
  puntero=document.getElementById('enlace2');
  puntero.removeAttribute('href');
}

function inicializarAtributo()
{
  var puntero=document.getElementById('enlace1');
  puntero.setAttribute('href','http://www.google.com.ar');
  puntero=document.getElementById('enlace2');
  puntero.setAttribute('href','http://www.yahoo.com.ar');
}

Lo nuevo se encuentra en la función eliminarAtributo.
Primero obtenemos la referencia del primer enlace cuyo id se llama enlace1:

var puntero=document.getElementById('enlace1');

Y ahora con la referencia a la marca HTML que se guardó en la variable puntero llamamos al método removeAttribute:

puntero.removeAttribute('href');

Lo mismo hacemos para el segundo enlace:

puntero=document.getElementById('enlace2');
  puntero.removeAttribute('href');

Para crear el atributo lo hacemos como lo vimos en un concepto anterior:

var puntero=document.getElementById('enlace1');
  puntero.setAttribute('href','http://www.google.com.ar');
  puntero=document.getElementById('enlace2');
  puntero.setAttribute('href','http://www.yahoo.com.ar'); 

Si queremos conocer el valor de un atributo de un nodo de tipo elemento lo podemos hacer llamando al método getAttribute.
El siguiente ejemplo recupera el valor de la propiedad href de un ancla.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<a id="enlace" href="http://www.google.com.ar">Google.</a><br>
<input type="button" value="Recuperar atributo href" onClick="recuperarAtributo()">
<br>
</body>
</html>

funciones.js

function recuperarAtributo()
{
  var puntero=document.getElementById('enlace');
  alert(puntero.getAttribute('href'));
}

Como podemos observar, primero recuperamos una referencia al nodo elemento que queremos procesar:

var puntero=document.getElementById('enlace');

y luego accedemos por esta referencia al método getAttribute pasando como parámetro el nombre de la propiedad que queremos recuperar:

alert(puntero.getAttribute('href')); 

Para mover un nodo y todos sus descendientes sólo necesitamos la referencia del mismo. Debemos utilizar el método ya conocido appendChild. Este método agrega el nodo que le indicamos a la nueva ubicación dentro del árbol y lo elimina automáticamente de su posición actual.

Para ver el funcionamiento de mover un nodo desarrollaremos un ejemplo que mueva el primer párrafo contenido en un div y lo disponga en otro div.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="region1"><p>Este es el primer párrafo</p><p>Este es el segundo párrafo

</p><p>Este es el tercer párrafo</p></div>
<input type="button" value="Mover el primer párrafo" 
onClick="moverParrafo()">
<div id="region2">
</div>
</body>
</html>

funciones.js

function moverParrafo()
{
  var puntero1=document.getElementById('region1');
  var parrafo1=puntero1.firstChild;
  var puntero2=document.getElementById('region2');
  puntero2.appendChild(parrafo1);
}

Obtenemos primero la referencia al primer div:

var puntero1=document.getElementById('region1');

Obtenemos luego la referencia al primer párrafo contenido en el div:

var parrafo1=puntero1.firstChild;

Luego obtenemos la referencia al segundo div:

var puntero2=document.getElementById('region2');

Por último añadimos la referencia del párrafo al segundo div:

puntero2.appendChild(parrafo1);

Es muy importante notar que cuando agregamos el párrafo al segundo div, desaparece del primer div.