Elementos dinámicos se refiere a la creación y manipulación de elementos HTML de forma dinámica utilizando JavaScript. En lugar de tener todos los elementos HTML predefinidos en el archivo HTML, podemos utilizar JavaScript para crear, agregar, modificar y eliminar elementos HTML en tiempo de ejecución, según las necesidades de nuestra aplicación.
Aquí tienes un ejemplo que muestra cómo crear dinámicamente un elemento <p> y agregarlo al documento:
<!DOCTYPE html>
<html>
<head>
<title>Elementos Dinámicos</title>
</head>
<body>
<h1>Elementos Dinámicos</h1>
<button onclick="agregarParrafo()">Agregar Párrafo</button>
<script>
function agregarParrafo() {
const nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = 'Este es un párrafo creado dinámicamente';
document.body.appendChild(nuevoParrafo);
}
</script>
</body>
</html>En este ejemplo, tenemos un botón "Agregar Párrafo" que, al hacer clic, ejecuta la función agregarParrafo(). Esta función utiliza el método createElement para crear dinámicamente un elemento <p>. Luego, establece el contenido de texto del párrafo utilizando la propiedad textContent. Finalmente, utilizamos appendChild para agregar el nuevo párrafo como un hijo del elemento <body>, lo que resulta en la visualización del párrafo en la página.
Este es solo un ejemplo básico, pero en JavaScript puedes realizar muchas más operaciones dinámicas con elementos HTML. Puedes agregar atributos, aplicar estilos, adjuntar eventos, modificar clases y estructuras, y mucho más. La manipulación dinámica de elementos HTML es especialmente útil cuando necesitas crear contenido de forma dinámica, actualizar la interfaz de usuario en respuesta a acciones del usuario o datos cambiantes, y crear aplicaciones interactivas y dinámicas.