Retourner à la page d'accueil de TJS

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

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
<script>
 var myDiv=document.createElement("div");
 myDiv.setAttribute("id", "myDivId");
 myDiv.setAttribute("title", "Message de titre");
 console.log(myDiv);
</script>

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

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

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

Commandez en ligne

Chercher une fonction, un objet, ...

Le 27/11/2020 04:18:41 sur php7 en 104.94 ms