Créer un élément avec une classe en JavaScript
Cet article va générer un élément HTML à l’aide d’une fonction JavaScript ; nous appellerons la fonction sur l’événement de clic de bouton et créerons un élément avec la classe.
Créer un élément en JavaScript
document.createElement() est une méthode par défaut qui accepte le paramètre du nom de la balise HTML en tant que chaîne et crée un nœud de type d’élément HTML.
Nous pouvons créer n’importe quel élément HTML et l’attacher à l’arborescence DOM en utilisant ceci. Nous pouvons attribuer un identifiant, un contenu et un CSS pour le style et ajouter cet élément au corps principal de la page HTML.
Syntaxe de base :
let myElement = document.createElement(anyTag);
Créer un élément avec une classe en JavaScript
Nous pouvons créer un élément HTML avec classe en utilisant la méthode classList.add(). Nous pouvons également ajouter plusieurs classes à un élément en utilisant cette méthode.
La méthode add() passe sur la classe si elle est déjà présente sur l’élément HTML. Nous pouvons utiliser la méthode appendChild() pour ajouter un nœud d’élément au corps principal de HTML.
Syntaxe avec classe :
element.classList.add('bg-red', 'text-lg')
Exemple:
<!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>
Dans le source HTML ci-dessus, nous avons créé un élément bouton, et sur l’événement de clic de ce bouton, nous avons appelé createFunction(). Dans cette fonction, nous créons un élément div en utilisant la méthode document.createElement('div') et le stockons dans la variable myDiv.
Ensuite, nous avons ajouté la classe mystyle à cet élément en utilisant la méthode myDiv.classList.add('mystyle') et ajouté du contenu textuel à afficher à l’aide de document.createTextNode() et ajouté à myDiv.
Enfin, nous ajoutons un élément au corps principal de la source HTML en utilisant document.body.appendChild(myDiv). Vous pouvez enregistrer la source ci-dessus avec l’extension html et l’ouvrir dans le navigateur et tester l’exemple.