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)

 

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.