Comment créer un élément HTML via JavaScript en utilisant CreateElement

HTML est un langage de balisage qui donne une structure à nos pages Web alors que JavaScript est un langage de programmation Web qui offre une interactivité avec l'utilisateur. Surtout, pour plus de simplicité, les développeurs définissent et créent des éléments à l'intérieur de HTML. Cependant, ce n'est pas le seul moyen de créer des éléments et nous pouvons également créer des éléments à l'aide de la méthode d'objet de document JavaScript CreateElement () Pour rendre notre page Web plus dynamique. En raison de l'objet de document, nous pouvons accéder aux éléments HTML.

Qu'est-ce que CreateElement ()?

Le CreateElement () est une méthode intégrée par un objet de document qui a la fonction de créer dynamiquement un élément HTML à partir et de renvoyer l'élément HTML nouvellement créé.

Le syntaxe de CreateElement () est donné ci-dessous:

var CréationElement = Document.createElement (htmltagname);

Le CreateElement () prend un paramètre Htmltagname qui est un paramètre obligatoire de la chaîne de type et c'est le nom de balise d'un élément HTML.

Il convient de noter que le CreateElement () La méthode crée cependant un élément HTML pour joindre l'élément au document (page Web), nous devons utiliser le APPENDCHILD () ou insertFore () méthodes.

Maintenant que nous savons ce que le CreateElement () La méthode est, regardons un exemple pour mieux comprendre le CreateElement () méthode.

Exemple 1:

Dans cet exemple, nous créerons un élément de bouton à partir de JavaScript en cliquant sur un bouton déjà existant.

Créons d'abord un bouton en html qui a un sur clic événement attaché à lui.

Bouton magique

Chaque fois qu'un utilisateur cliquera sur le bouton, il commencera à exécuter le myfunc () fonction. En fin de compte, nous avons utilisé le scénario étiquette et a fourni la source (code.js) du fichier javascript qui contient le myfunc () fonction.

Le code JavaScript est donné ci-dessous:

fonction myfunc ()
var mybtn = document.createElement ("bouton");
mybtn.innerhtml = "nouveau bouton";
document.corps.APPENDCHILD (MYBTN);

Dans le code ci-dessus, nous avons d'abord initialisé le myfunc () fonction puis a créé un élément de bouton à l'aide du CreateElement () méthode. Ensuite, pour donner au bouton un titre, nous avons utilisé le mybtn.innerhtml propriété. En fin de compte, nous avons attaché le bouton au corps de notre HTML en utilisant le APPENDCHILD () méthode.

La sortie est donnée ci-dessous:

Nous pouvons voir que chaque fois que nous cliquez sur le Bouton magique, il crée un nouveau bouton avec le titre "Nouveau bouton".

Exemple2:

Dans cet exemple, nous créerons un h2 Tag de HTML via JavaScript, puis la fixer avec le corps HTML en utilisant le insertFore () méthode.

À cette fin, écrivons d'abord le code HTML:

Insérer en tête au-dessus de cela

Bouton magique

Le reste du code est le même que l'exemple 1 à l'exception que nous avons maintenant créé un élément div à l'intérieur de laquelle nous avons créé un

Tag avec l'ID "para".

Le code JavaScript est donné ci-dessous:

fonction myfunc ()
var myContainer = document.GetElementById ("MyContainer");
var para = document.getElementByid ("para");
var myheading = document.CreateElement ("H2");
ma tête.innerhtml = "Nouveau titre";
mycontaignant.Insèrefore (ma tête, para);

À l'intérieur de la fonction, nous obtenons d'abord la référence du et

élément de HTML. Ensuite, nous créons un

élément utilisant CreateElement () méthode. Pour l'insérer avant le

élément que nous utilisons le insertFore () Méthode où nous passons le nouvellement créé

Tag et le

La sortie du code ci-dessus est donnée ci-dessous:

Chaque fois que nous cliquons sur le bouton magique, un nouvel élément h2 est créé via JavaScript CreateElement () méthode.

Conclusion

L'objet de document nous donne accès aux éléments HTML et l'une des méthodes intégrées des objets de document est le CreateElement () méthode. Le CreateElement () La méthode est utilisée pour créer un élément HTML dynamiquement en prenant le nom de balise HTML comme paramètre, puis en renvoyant l'élément HTML nouvellement créé. Pour attacher l'élément HTML nouvellement créé à HTML, nous utilisons le APPENDCHILD () ou insertFore () méthodes.

Dans cet article, nous avons vu comment créer un élément HTML à l'aide du CreateElement () Méthode en javascript.