Dans cet article, nous allons expliquer comment créer un élément HTML via JavaScript. Ici, nous verrons quelques exemples pour insérer l'élément créé dans le document.
La création d'éléments par HTML n'est pas le seul moyen de créer des éléments. Cependant, par souci de simplicité, nous créons souvent des éléments directement dans le document HTML, mais en utilisant JavaScript, il est également possible de créer des éléments.
Le document.createElement() est utilisé pour créer dynamiquement un nœud d'élément HTML avec le nom spécifié via JavaScript. Cette méthode prend le nom de l'élément comme paramètre et crée ce nœud d'élément.
Après la création d'un élément, nous pouvons soit utiliser la méthode appendChild() ou la méthode insertBefore() pour insérer l'élément créé dans le document.
Nous pouvons utiliser le supprimerEnfant() méthode pour supprimer un nœud et peut également utiliser la remplacerEnfant() méthode pour remplacer le nœud.
Syntaxe
document.createElement(nodename);
Cette méthode accepte une seule valeur de paramètre indiquée comme suit :
botte de printemps
nom du nœud : C'est le paramètre obligatoire. Ce paramètre est de type chaîne. Il précise le nom de l'élément que nous devons créer. Le nom de l'élément spécifié dans le paramètre créera l'élément ; sinon, si le nom de l'élément spécifié n'est pas reconnu, un élément HTML inconnu sera créé.
Le document.createElement() renverra l'élément nouvellement créé.
Voyons maintenant quelques exemples d'utilisation de document.createElement() méthode. Ici, nous allons montrer deux exemples. Dans le premier exemple, nous utiliserons le appendChild() méthode pour insérer l’élément dans le document, et dans le deuxième exemple, nous utiliserons la insérerAvant() méthode pour insérer un élément créé par le document.createElement() méthode.
Exemple 1
Dans cet exemple, nous utilisons le document.createElement() méthode pour créer un nouvel élément de bouton. Nous allons insérer l'élément créé en utilisant le appendChild() méthode. Ici, il y a un amusant() méthode qui créera un nouvel élément de bouton en utilisant le créerElement() méthode. Nous définissons le texte en utilisant le intérieurHTML qui sera affiché en haut du bouton.
Voyons l'exemple donné ci-dessous.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Testez-le maintenant Sortir
Après l'exécution du code ci-dessus, le résultat sera -
Après avoir cliqué sur le bouton donné, la sortie sera -
Exemple2
Dans cet exemple, nous utilisons le document.createElement() méthode pour créer un nouvel élément de bouton. Ici, nous utilisons le insérerAvant() méthode pour insérer l’élément créé. Il existe un élément div qui a un élément enfant paragraphe. Le nouvel élément bouton sera inséré avant l’élément enfant paragraphe de l’élément div.
Voyons l'exemple donné ci-dessous.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Testez-le maintenant Sortir
Après l'exécution du code ci-dessus, le résultat sera -
Après avoir cliqué sur le bouton ci-dessus, la sortie sera -
La capture d'écran ci-dessus montre que le nouvel élément bouton est inséré avant l'élément paragraphe. C'est parce que nous avons utilisé le insérerBeofre() méthode d'insertion du nouvel élément créé à l'aide de la document.createElement() méthode.