Cómo cambiar elementos HTML usando JavaScript

Si eres un desarrollador web, probablemente estés familiarizado con HTML, CSS y JavaScript. En este artículo, nos enfocaremos en cómo podemos usar JavaScript para cambiar dinámicamente los elementos HTML. El cambio en elementos HTML sin la necesidad de una recarga de página es una de las funcionalidades esenciales para crear una experiencia de usuario agradable en las aplicaciones web. Con este tutorial, aprenderás cómo cambiar el contenido, el estilo y los atributos de los elementos HTML mediante el uso de JavaScript.

Cambio de contenido en elementos HTML

La manipulación del contenido de los elementos HTML es una tarea común en la programación web. Para hacer esto, necesitamos seleccionar el elemento y luego cambiar su contenido usando JavaScript. Podemos lograr esto utilizando las siguientes funciones:

• document.getElementById(): selecciona un elemento HTML por su atributo id.
• document.querySelector(): selecciona un elemento HTML usando selectores CSS.

Después de seleccionar el elemento HTML, podemos cambiar su contenido utilizando la propiedad innerHTML del elemento.

Usando document.getElementById()

El siguiente ejemplo cambia el contenido de un elemento <p> con el atributo id "mi-paragraph":


//selecciona el elemento por su atributo id
var paragraph = document.getElementById("mi-paragraph");

//cambia el contenido del elemento
paragraph.innerHTML = "Nuevo contenido";


Usando document.querySelector()

El siguiente ejemplo cambia el contenido de un elemento <p> con una clase CSS llamada "mi-clase":


//selecciona el elemento usando un selector CSS
var paragraph = document.querySelector(".mi-clase");

//cambia el contenido del elemento
paragraph.innerHTML = "Nuevo contenido";


Cambio de estilo en elementos HTML

Podemos manipular la apariencia visual de los elementos HTML cambiando sus estilos usando JavaScript. Podemos hacer esto usando la propiedad style del elemento, que nos permite cambiar el valor de los atributos CSS. Podemos cambiar cualquier atributo CSS que se aplique al elemento, como color, tamaño de fuente, margen, etc.

Usando la propiedad style

El siguiente ejemplo cambia el color de un elemento <p> con la clase CSS "mi-clase" a rojo:


//selecciona el elemento usando un selector CSS
var paragraph = document.querySelector(".mi-clase");

//cambia el estilo del elemento
paragraph.style.color = "red";


Usando la propiedad classList

Podemos agregar o quitar clases CSS para cambiar los estilos de los elementos. Esto se realiza utilizando las propiedades classList.add() y classList.remove() del elemento.

El siguiente ejemplo agrega la clase CSS "mi-nueva-clase" a un elemento <p> con el atributo id "mi-paragraph":


//selecciona el elemento por su atributo id
var paragraph = document.getElementById("mi-paragraph");

//agrega la clase CSS al elemento
paragraph.classList.add("mi-nueva-clase");


Cambio de atributos en elementos HTML

Podemos cambiar los atributos de los elementos HTML utilizando JavaScript. Esto nos permite cambiar los valores de los atributos como el valor de un enlace, la imagen de fondo en un div, etc. Para cambiar los atributos de los elementos, podemos utilizar la propiedad setAttribute() del elemento.

Cambiando el valor de un atributo

El siguiente ejemplo cambia el valor del atributo "href" de un elemento <a> con la clase CSS "mi-clase":


//selecciona el elemento usando un selector CSS
var link = document.querySelector(".mi-clase");

//cambia el valor del atributo href
link.setAttribute("href", "https://www.nuevo-link.com");


Ejemplos de código

Aquí hay algunos ejemplos de código que puedes practicar para cambiar elementos HTML usando JavaScript:

• Cambia el contenido de un párrafo cuando haces clic en un botón.
• Cambia el fondo de un div según la hora del día.
• Cambia el valor de un campo de entrada según la selección de una lista desplegable.

Conclusión

En este tutorial, aprendiste cómo cambiar dinámicamente los elementos HTML usando JavaScript. Con los métodos discutidos en este artículo, ahora tienes la capacidad de cambiar el contenido, el estilo y los atributos de los elementos HTML en tiempo real. Recuerda practicar con ejemplos de código para mejorar tus habilidades de programación.

Preguntas frecuentes

¿Qué es JavaScript?

JavaScript es un lenguaje de programación interpretado de alto nivel que se utiliza principalmente en el desarrollo web. Con JavaScript, puedes crear interactividad y dinamismo en tu sitio web.

¿Cómo puedo seleccionar un elemento HTML en JavaScript?

Puedes seleccionar un elemento HTML usando su atributo id, su etiqueta HTML o una clase CSS utilizando la función document.querySelector().

¿Cómo puedo cambiar el contenido de un elemento HTML usando JavaScript?

Puedes cambiar el contenido de un elemento HTML usando la propiedad innerHTML del elemento o agregando texto con la propiedad textContent.

¿Qué son las clases CSS?

Las clases CSS son una forma de agregar estilos a un elemento HTML. Puedes definir una clase CSS en el archivo CSS y luego aplicar la clase a los elementos que desees estilar en el HTML.

Cómo habilitar o deshabilitar JavaScript en iPhone (Safari)

Cómo establecer el valor de un campo de entrada en JavaScript

Cómo Desencadenar un Evento de Clic en JavaScript

Cómo encontrar y obtener elementos HTML en JavaScript

Cómo usar el método indexOf en JavaScript

Cómo limpiar el canvas en JavaScript

Cómo verificar si un checkbox está marcado utilizando JavaScript

Cómo activar la descarga de un archivo al hacer clic en un botón HTML o JavaScript

Cómo eliminar el primer elemento de un array en JavaScript