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)
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!