Méthode : window.document.createElement()

Crée et retourne un élément HTML à partir de sa balise (tag)

Syntaxe
HTMLElement document.createElement(String tagName)

Compatible tous navigateurs

Oui

Description
Crée un objet HTMLElement de balise HTML tagName.
Au moment de la création, l'objet n'est pas encore intégré au DOM.
Pour l'ajouter dans le DOM, utilisez appendChild() ou insertBefore().

Exemple 1 : Création de DIV

Code source

Résultat

Emulation de la console

Explication

L'objet myDiv est créé.
Les attributs id et title sont ajoutés.
Il n'est pas encore inséré dans le DOM.

Exemple 2 : Charger un script JS dynamiquement

Code source

<div class="btn" onclick="loadJS()">Charger le fichier source.js dans la page</div>

<script type="text/javascript">
function loadJS() {
var js=document.createElement("script");
js.src="media/source.js";
js.onerror=function() {console.log("Erreur de chargement du script");}
js.onload=function() {
console.log("source.js chargé correctement. Vous pouvez faire vos traitements ici");
console.log("Donc la variable message est bien créée et vaut :");
console.log(message);
}
document.body.appendChild(js);
}
</script>

Résultat

Charger le fichier source.js dans la page

Emulation de la console

Explication

Cliquez sur le bouton pour charger le script media/source.js et détecter si le chargement est bien réussi.
Le fichier media/source.js ne contient qu'une seule ligne :
var message="Ceci est le message du fichier source.js";

Page en rapport
Introduction au DHTML

Page mise à jour le 13/04/2020

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Méthode : window.document.createElement()

Crée et retourne un élément HTML à partir de sa balise (tag)

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...