En este artículo, aprendemos cómo agregar elementos HTML dinámicamente usando JavaScript. Se requiere una comprensión básica de HTML, CSS y javascript. Aquí vamos a usar un botón y al hacer clic en este botón, podemos agregar un elemento HTML dinámicamente en este ejemplo.
Enfoque: cree un archivo HTML con cualquier nombre (Ex- index.html), luego escriba la plantilla HTML externa y tome un botón para que cuando alguien haga clic en el botón, se agregue dinámicamente un HTML uno por uno en un formato de lista. Hemos adjuntado un detector de eventos onclick al botón, cuando alguien hace clic en ese botón inmediatamente, el evento se activará y ejecutará la función de devolución de llamada adjunta a ese detector de eventos dentro de la función de devolución de llamada. Necesitamos mencionar una determinada tarea que queremos que suceda después de un onclick evento es un incendio.
A continuación se muestra la implementación del enfoque anterior:
index.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
display: flex;
justify-content: center;
}
#mybutton {
display: block;
margin: 0 auto;
}
#innerdiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<div id="innerdiv"></div>
<button id="mybutton">
click me
</button>
<script>
document.getElementById("mybutton").
addEventListener("click", function () {
document.getElementById("innerdiv").
innerHTML += "<h3>Hello geeks</h3>";
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA