/**
             * Esta funcion busca una palabra en la RAE (www.rae.es)
             *
             * @palabra: la palabra que deseamos buscar.
             * @div: elemento div del documento html donde queremos crear
             * el ifram con el resultado de la busqueda.
             */
            function buscar(palabra, div)
            {
                //codificar la palabra por si lleva acentos
                palabra = encodeURI(palabra);
 
                //Generar url a la que debemos llamar para obtener
                //el resultado de buscar dicha palabra en la RAE
                var url;
 
                    url = "http://buscon.rae.es/draeI/SrvltGUIBusUsual?";
                    url = url + "LEMA=" + palabra + "&origen=RAE&TIPO_BUS=3";
 
               //Generar iframe con la página de la RAE
               var iframe;
 
                    iframe = document.createElement("iframe");
 
                    //Añadir atributos al iframe creado
                    iframe.setAttribute("scroll", "auto");
                    iframe.setAttribute("frameborder", "0");
                    iframe.setAttribute("width", "100%");
                    iframe.setAttribute("height", "300px");
                    iframe.setAttribute("src", url);
 
               //Limpiar el contenido de result
              limpiarDiv(div);
 
               //Guardar el iframe creado dentro del div indicado
               var result;
 
                       result = document.getElementById(div);              
 
                    //Añadir al div el iframe con los resultados
                    result.appendChild(iframe);
            }
 
            /**
             * Limpiar (eliminar) todos los elementos que contenga
             * el div.
             *
             * @id: identificador del elemento div.
             */
            function limpiarDiv(id)
            {
                var div;
 
                    div = document.getElementById(id);
 
                    while(div.hasChildNodes())
                    {
                        div.removeChild(div.lastChild);
                    }
            }

<!--
            Buscar con Javascript en la web de la RAE
            www.rae.es
        -->
        <p>
            Buscar: &nbsp;
            <input type="text" id="palabra" /> &nbsp;
                <a href="#"
                   onclick="buscar(document.getElementById('palabra').value,
                                   'resultado');"> buscar </a>
        </p>
        <p>
            <div id="resultado"></div>
        </p>

        //Eliminar el contenido de un div
        function limpiarDiv(id)
        {
            var div;
 
                div = document.getElementById(id);
 
                while(div.hasChildNodes())
                {
                    div.removeChild(div.lastChild);
                }
        }
 
        //Escribir en un div
        function rellenarDiv(id, texto)
        {
            var div;
            var nodoTexto;
 
              div = document.getElementById(id);
 
              nodoTexto = document.createTextNode(texto);
 
              //Llamamos a la función limpiarDiv para eliminar el contenido
              //actual del div.
              limpiarDiv(id);
 
              div.appendChild(nodoTexto);
        }

<!-- incluir fichero con la funcion en JavaScript -->
<script src="./contarCaracteres.js" type="text/JavaScript"></script>
 
<!--
Campo al que contaremos los caracteres 
 
* Llamamos a la función con el evento "onKeyDown".
* Le pasamos como parametros:
	- el id del campo (this.id)
	- el id del div donde se mostrara el nº de caracteres actuales
	- el color que tendra el campo en caso de sobrepasar el máximo de caracteres
	- el máximo de caracteres permitidos.
 
-->
<input id="ejemplo" onkeydown="contarCaracteres(this.id, 'nCaracteres','#FF0000',10)" type="text" />
 
<!-- div donde mostraremos el numero de caracteres -->
Caracteres:<div id='nCaracteres'></div>

function contarCaracteres(campo, id,color,maximo)
{
	/**
	 * variable que contiene el div donde vamos a
	 * escribir y borrar.
	 */
	var div;
 
	/**
	 * variable que guardara el numero total de
	 * caracteres que tiene el campo que estamos
	 * contando.
	 */
	var cTotal;
 
	/**
	 * variable que creara el nodo de texto y el valor
	 * que mostraremos.
	 */
	var tmp;
 
	//Asignar div al div con el que trabajaremos
	div = document.getElementById(id);
 
	//Borrar el contenido del div
	while(div.hasChildNodes())
	{
		div.removeChild(div.lastChild);
	}
 
	//Obtener el número de caracteres del campo en cTotal.
	campo = document.getElementById(campo);
	cTotal = campo.value.length + 1;
 
	/**
	 * Añadirle el atributo maxlenght para evitar que se escriban
	 * mas caracteres de los indicados.
	 */
	campo.setAttribute("maxlength",maximo);
 
	/**
	 * Si se supera el máximo de caracteres permitidos ponemos el fondo
	 * del campo en rojo ó el color indicado.
	 */
	if(cTotal > maximo  ) {
		campo.style.backgroundColor = color;
	}  else {
		campo.style.backgroundColor = "#FFFFFF";
	}
 
	/**
	 * Escribimos el total de caracteres en el div indicado.
	 * Para hacer esto creamos un nodo de texto con el valor de
	 * cTotal. El nodo lo asignamos a tmp
	 */
	tmp = document.createTextNode(cTotal);
 
	//Añadimos el contenido de tmp al div indicado.
	div.appendChild(tmp);
}