Crear elemento con clase en JavaScript
Este artículo generará un elemento HTML utilizando una función de JavaScript; llamaremos a la función en el evento de clic de botón y crearemos un elemento con clase.
Crear elemento en JavaScript
document.createElement() es un método predeterminado que acepta el parámetro del nombre de la etiqueta HTML como cadena y crea un nodo de tipo de elemento HTML.
Podemos crear cualquier elemento HTML y adjuntarlo al árbol DOM usando this. Podemos asignar id, contenido y CSS para diseñar y agregar ese elemento al cuerpo principal de la página HTML.
Sintaxis básica:
let myElement = document.createElement(anyTag);
Crear elemento con clase en JavaScript
Podemos crear un elemento HTML con clase usando el método classList.add(). También podemos agregar más de una clase a un elemento usando ese método.
El método add() pasa por alto la clase si ya está presente en el elemento HTML. Podemos usar el método appendChild() para agregar un nodo de elemento al cuerpo principal de HTML.
Sintaxis con clase:
element.classList.add('bg-red', 'text-lg')
Ejemplo:
<!DOCTYPE html>
<html>
<style>
.mystyle {
background-color: yellow;
padding: 10px;
}
</style>
<body>
<h1>Delftstack learning</h1>
<h2>Create element with class using JavaScript</h2>
<p>Click the button to create an element:</p>
<button onclick="createFunction()">Create</button>
<script>
function createFunction() {
let myDiv = document.createElement('div'); // element creation
myDiv.classList.add('mystyle'); // adding class
let content = document.createTextNode('This is a text content of an element!'); // text content
myDiv.appendChild(content); // append text content to element
document.body.appendChild(myDiv) // append element to body
}
</script>
</body>
</html>
En la fuente HTML anterior, hemos creado un elemento button, y en el evento de clic de ese botón, hemos llamado createFunction(). En esa función, estamos creando un elemento div usando el método document.createElement('div') y almacenándolo en la variable myDiv.
Luego, agregamos la clase mystyle a ese elemento usando el método myDiv.classList.add('mystyle') y agregamos contenido de texto para mostrar usando document.createTextNode() y agregamos a myDiv.
Finalmente, agregamos el elemento al cuerpo principal de la fuente HTML usando document.body.appendChild(myDiv). Puede guardar la fuente anterior con la extensión de html y abrirla en el navegador y probar el ejemplo.