Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

AJOUTER ET INSERER DES ELEMENTS HTML EN JAVASCRIPT

Créer un nouvel élément HTML

Pour créer un nouvel élément HTML en JavaScript, nous utiliserons généralement la méthode createElement() de l’objet Document.

Cette méthode va prendre en argument le nom de l’élément HTML que l’on souhaite créer.

On utilise la méthode JavaScript createElement() pour créer un élément HTML

Nous avons ici créé un nouvel élément p. Cependant, notre élément ne contient pour le moment ni attribut ni contenu textuel, et n’a pas encore été inséré à l’intérieur de notre page à un endroit précis.

Nous allons donc commencer par ajouter du texte et un attribut à notre élément, puis nous l’insérerons ensuite dans le flux de notre document.

Ajouter un attribut et du texte à un élément HTML

Pour ajouter des attributs, nous allons procéder comme dans le chapitre précédent, c’est-à-dire avec notre propriété attribute ou exceptionnellement avec la méthode setAttribute().

Pour ajouter du texte, nous allons utiliser la méthode createTextNode() qui, comme son nom l’indique, va créer un nouveau nœud de type texte.

On crée un attribut pour notre élément HTML

Ici, nous avons ajouté un attribut id avec la valeur « nouveau » à notre paragraphe. Nous avons également créé un nœud de type texte que nous n’avons pas encore inséré dans notre paragraphe.

Il nous reste donc à insérer le texte dans notre paragraphe puis le paragraphe dans notre page. Nous travaillons avec des variables pour faciliter la manipulation de nos différents objets.

Insérer du texte et un élément dans une page HTML

Pour insérer notre texte dans notre élément et notre élément dans le flux de notre page, nous allons utiliser la méthode appendChild().

La méthode appendChild() va insérer un objet en tant que dernier enfant d’un autre objet. Cette méthode appartient à l’objet Element et va prendre le nom de l’objet à insérer en argument.

Utilisation de la méthode appendChild de l’objet JavaScript element

On insère des éléments HTML grâce à appendChild en JavaScript

Essayer ce code !

Ici, donc, on commence par insérer le texte dans notre paragraphe. Comme appendChild() est une méthode de l’objet Element, on l’utilise en précisant l’élément dans lequel notre texte doit être inséré (ici, newPara).

Ensuite, on insère notre paragraphe dans notre page. Là encore, il faut préciser dans quel élément on va insérer notre paragraphe. Ici, on veut l’insérer dans l’élément body. On utilise donc document.body.

Insérer un élément HTML à un endroit précis

La méthode appendChild() va toujours insérer un objet en tant que dernier enfant de l’objet de type element indiqué.

Par exemple, ci-dessus, notre paragraphe a été inséré en tant que dernier élément de notre body.

Parfois, on voudra insérer un élément dans un endroit précis d’une page HTML. Pour faire cela, on va pouvoir utiliser la méthode insertBefore(), qui va insérer un objet juste avant un élément comme son nom l’indique.

Cette nouvelle méthode appartient également à l’objet Element et nous devons lui fournir deux arguments : l’élément à insérer et l’élément avant lequel il sera inséré.

Par exemple, on peut insérer notre paragraphe newPara juste avant notre paragraphe qui contient le texte « Du texte ».

Utilisation de la méthode JavaScript insertBefore()

On peut insérer un élément HTML n’importe où dans une page en JavaScript grâce à insertBfore()

Essayer ce code !

Notre nouvel élément s’insère bien à la place voulue. Attention à ne pas oublier de bien appliquer la méthode insertBefore() à un objet de type element.

Ici, comme notre paragraphe para1 est un enfant direct de l’élément body, on applique notre méthode insertBefore() à cet objet JavaScript que l’on récupère grâce à document.body.

Chapitre précédent

Chapitre suivant