BitCuco

¡Hola Mundo!

Crear elementos HTML con Javascript

Anuncio / Advertisement

El lenguaje HTML es el lenguaje por defecto usado para el cliente en el desarrollo web, es un lenguaje interpretado, es decir que no se compila y se traduce en tiempo de ejecución. Javascript es otro lenguaje web a nivel cliente, con 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>

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:

Anuncio / Advertisement
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:

Anuncio / Advertisement
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:

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


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:

Anuncio / Advertisement
document.write("¿Qué es JavaScript?");
document.write("

¿Cómo trabajar con JavaScript?", " ¿Qué es jQuery?

"); document.write("
Hola Mundo
");
Anuncio / Advertisement
1 0

Sobre el Autor

BitCuco

BitCuco. El Blog para los desarrolladores emergentes.