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 :

Replace() ou Remplacer une chaîne de caractères par une autre en Javascript
Non prise en charge de addEventListener par IE < 9
Empêcher le clic droit sur les images de votre site
Ouvrir une fenêtre popup sur lien HTML
Récupérer l'URL de la page courante
Défilement continu horizontal ou vertical d'une bande d'images en javascript
Valider un formulaire en javascript
Typer ses variables en javascript
Récupérer la valeur ou le texte sélectionné d'un élément SELECT dans un formulaire
Vérifier si un champs est bien renseigné dans un formulaire 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