DHTML DOM:Ajout contenu

Un article de WikiTuto.

Jump to: navigation, search

Catégorie:Cours DHTML

DHTML Concepts de base

Premiers pas dans le DOM

DOM: modification du contenu dans un document

Accès aux feuilles de style par le DOM

Le DOM: fenêtre, navigateur et interface-utilisateur

Gestion des événements et DOM

modifier Tdm DHTML

Source : Gilles Chagnon

[modifier]

Méthodes de création de nœuds

[modifier]

Création ex-hihilo

Deux méthodes appliquées à l'objet document et une méthode appliquée à un objet déjà existant permettent de créer des nœud à partir de rien. Le résultat de ces méthodes est un nœud n'ayant aucun parent. Il est donc nécessaire, ce que nous verrons par la suite, de d'affecter ce nœud à un nœud déjà existant. *createElement permet de créer un... élément. Par exemple, preface=document.createElement("div") crée un élément div.

createTextNode permet de créer un... nœud de type texte. Par exemple, dublabla=document.createTextNode("un peu de blabla") crée un contenu "un peu de blabla".

cloneNode(deep) permet de créer une copie de l'élément courant. Le booléen deep permet de paramétrer le niveau de profondeur de la copie. Quand deep vaut false, seuls le nom de la balise et ses attributs sont copiés. Quand deep vaut true, le contenu également de l'élément est copié. Par exemple, parag=document.getElementById("monpar"); parag2=parag.cloneNode(true) crée une copie de l'élément d'identifiant monpar, texte inclus compris.

[modifier]

Affectation d'un nœud à un autre nœud

La méthode standard est la méthode appendChild() appliquée à un élément donné. Supposons par exemple créés les éléments para1 et spanauteur. On peut affecter spanauteur à para1 en exécutant para1.appendChild(spanauteur);

On peut aussi directement créer un attribut et l'attacher à un élément existant, par la méthode createAttribute(). Ainsi, attr_alignement=para1.createAttribute("align"); attr_alignement.value="center" permet d'affecter à l'élément para1 l'attribut align avec la valeur center.

[modifier]

Ajout local

Enfin, étant donné un nœud créé au préalable avec createElement, on peut l'affecter en amont d'un autre élément. Par exemple,

parentDiv=document.getElementById("parentDiv") ;
sp2=document.getElementById("childSpan") ;
sp1=document.createElement("span") ;
parentDiv.insertBefore(sp1,sp2) ;

parentDiv=document.getElementById("parentDiv"); sp2 = document.getElementById("childSpan"); sp1 = document.createElement("span");
parentDiv.insertBefore(sp1, sp2); repère d'abord dans le document le div d'identifiant parentDiv, 
puis l'élément span d'identifiant childSpan, crée un  élément span supplémentaire, puis l'insère avant le précédent.

[modifier]