le MEMO du WEB développeur
••• Javascript •••  Liste des Mémos, astuces et bonnes pratiques

Créer un élément HTML en JavaScript

Exemple d'utilisation insertBefore

p1

p2

p3

Création d'un élément HTML en Javascript

Affectation des attributs de l'élément :

var new_elt= document.createElement('img');
new_elt.id   = 'mon_img'
new_elt.src  = 'http://www.monsite/images/monimage.jpg';
new_elt.title = 'Title de mon imag';
new_elt.setAttribute('alt', 'Attribut Alt de mon image');

A ce stade, l'objet image a été crée mais il n'a pas encore été inseré dans le document HTML.
Pour ce faire on va utiliser la propriété appenChild() qui va ajouter un élément parmis les enfant d'un élément parents spécifié, ici Element_Parent  (l'élément ajouté par appenChild se positionnera à la fin des enfants de l'élément parent).

var Nouvel_Element = Element_Parent.appendChild(new_elt);

Exemple :

HTML :

<div id="div_parent">
  <p>p1</p>
  <p id="enfant2">p2</p>
  <p>p3</p>
</div>

JavaScript :


document.getElementById('div_parent').appendChild(new_elt);

HTML final :

<div id="div_parent">
  <p>p1</p>
  <p id="enfant2">p2</p>
  <p>p3</p>
<img src="http://www.monsite/images/monimage.jpg" alt="Attribut Alt de mon image" title="Title de mon imag"
</div>

Il est aussi possible d'ajouter un élément HTML  en JavaScript en Utilisant les propriétés insertBefore() 

Exemple :

document.getElementById("div_parent").insertBefore(new_elt,document.getElementById("enfant2"));

Dans cette exemple, notre élément new_elt sera inséré dans le document HTML juste avant le noeud d'identifiant enfant2, qui est un endant de div_parent (voir exemple en haut de page)

 

publié le 06/06/2014 par Memo Web
Commenter le Mémo :

Fonction Javascript pour récupérer la valeur d'un cookie
Format e-mail et téléphone portable
Afficher un message avant de quitter une page
Vérifier si un champs est bien renseigné dans un formulaire HTML
Ajouter un saut de ligne dans une alert javascript
Créer un bouton imprimer sur sa page web
Créer un effet d'opacité sur le survol d'une image
La fonction isNaN ou comment vérifier qu'une variable est un nombre
Faire une redirection en javascript
Ouvrir une fenêtre popup sur lien HTML
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos