Cómo crear elementos HTML con Javascript

El lenguaje HTML con Javascript son los lenguajes más usados para el cliente en el desarrollo web. Son lenguajes interpretados, es decir que no se compila y se traduce en tiempo de ejecución.

Javascript es el lenguaje web a nivel cliente, que junto con HTML tiene la ventaja adicional de ejecutar más funciones e incluso operaciones, y por lo tanto es fundamental para la ejecución de funciones en el cliente web.

Analizaremos como crear algunos elementos HTML usando Javascript. Es importante destacar que al incluir código Javascript adentro de un HTML escribimos el código entre: <script>Código javascript</script>

Funciones de Javascript con elementos HTML

document.createElement(): Este método es bastante útil para todos aquellos casos en los que desea crear un nuevo elemento HTML en un documento existente.

El método es bastante útil en situaciones en las que desea modificar un documento agregándole más nodos. Por lo tanto, si es necesario crear un nuevo elemento div para cumplir con algunos requisitos comerciales, se utiliza el siguiente método:

var div = document.createElement('div');

document.getElementById(): La mayoría de los desarrolladores web consideran este método como un amigo cercano. Se utiliza para acceder a cualquier nodo del documento para el que se haya especificado un identificador.

Devuelve un objeto del tipo HTML <Element Name> Element, que representa el elemento identificado por el identificador mencionado. Entonces, por ejemplo, en caso de que se deba cambiar algún atributo de color del elemento, puede usar este método. El uso de este método es el que se muestra en el siguiente fragmento de código:

var div = document.getElementById("some-div-id");
div.style.color = 'rojo';

Del mismo modo, si se selecciona el intervalo, el nombre del objeto sería
Entonces, el valor contenido en la variable div es un objeto de la clase HTMLSpanElement, y así sucesivamente.

document.getElementsByClassName(): Este método se utiliza para obtener de la página web representada una lista de elementos HTML que tienen un nombre de clase CSS especificado como su atributo. El método devuelve un objeto que representa la clase NodeList.

El objeto NodeList se puede recorrer para obtener todos los elementos HTML disponibles, con alguna clase CSS especificada. El uso de este método es el siguiente:

var classElements = document.getElementsByClassName("some-css-class");
classElements[0].style.color = 'rojo'; // Esto cambia el color del texto a rojo

document.getElementsByTagName(): similar a getElementsByClassName, este método proporciona una lista de elementos HTML en la página web representada que tienen un nombre de etiqueta especificado. Nombre de etiqueta es el nombre de la etiqueta HTML que está presente en los nodos en el árbol DOM.

Entonces, para hacer que todo el color del texto dentro de todos los divs en la página web representada sea rojo, tendría que hacer algo como lo siguiente:

var tagElements = document.getElementsByTagName("div");
tagElements[0].style.color = 'rojo';

document.getElementsByName(): La etiqueta de entrada HTML y select tienen un atributo de nombre, que actúa como índice de los datos que se pasan de una página a otra a través de los métodos de solicitud HTTP como GET o POST.

Por lo tanto, el objeto de documento permite que este método, document.getElementsByName, acceda a cualquier elemento que tenga el atributo de nombre como algún valor especificado. Para cambiar el texto dentro de todos los elementos que tienen el atributo de nombre como nombre de usuario al color rojo, puede usar el siguiente fragmento de código:

var nameElement = document.getElementsByName("nombre de usuario");
nameElement.style.color = "rojo";

Escribir elementos HTML con Javascript

document.write(): El método de escritura proporcionado por el objeto del documento le permite escribir una cadena o varias cadenas en la secuencia de salida, que es el navegador web.

Puede pasar una sola cadena como argumento a este método o una secuencia de cadenas a este método. Las cadenas se enviarán a la secuencia en el orden en que se pasaron como argumentos.

También puede generar etiquetas HTML, utilizando este método. Por lo tanto, si debe escribir algo de HTML en el navegador web, puede usar el siguiente fragmento de código:

document.write("¿Qué es JavaScript?");
document.write("
 ¿Cómo trabajar con JavaScript?", "
 ¿Qué es jQuery? 
"); 
document.write("
 Hola Mundo 
");

Conclusiones

Los elementos HTML pueden ser escritos utilizando Javascript, en donde podemos utilizar alguna biblioteca como Jquery.

Aún cuando Javascript se utiliza todavía mucho, existe una clara tendencia hacia la migración de uso a lenguajes Tipados como TypeScript, el cual por medio de Angular permite la creación de web apps.