| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Création dynamique d'objets DOM

Certaines applications peuvent avoir un grand nombre d'éléùents DOM ("div" par exemple) qui ne peuvent être spécifiés statiquement dans la page ou qui peuvent avoir une existence éphémère.
Il est donc possible de créer ces éléments dynamiquement par l'instruction createElement(elem).
Le paramètre elem peut être un élément DOM quelconque comme "div", "p", "button", etc..

Le script suivant crée un cadre contenant deux paragraphes. L'apparence et la position de ces éléments sont définies par la spécification elem.style.spec=valeur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple31</title>
<meta name="description" content="site http://www.construireunsite.fr" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
</head>

<body>
<!--Jscript31-->

<script type="text/javascript">
// création du cadre
var haut=150; // position du cadre
var gauche=300;
var cadre=document.createElement("div");
cadre.id="cadre";
cadre.style.position="absolute";
cadre.style.top=haut.toString()+"px";
cadre.style.left=gauche.toString()+"px";
cadre.style.backgroundColor="rgb(255,245,230)";
cadre.style.width="300px";
cadre.style.border="2px solid rgb(80,0,0)";
cadre.style.borderRadius="10px";
cadre.style.padding="20px";
// accrocher le cadre à l'élément "body"
var cvb=document.getElementsByTagName("body");
cvb[0].appendChild(cadre);
</script>

<script type="text/javascript">
// création du paragraphe titre
var titre=document.createElement("p");
titre.style.textAlign="center";
titre.style.fontFamily="Verdana";
titre.style.fontSize="14pt";
titre.style.fontWeight="bold";
// accrocher le paragraphe à l'élément "cadre"
cadre.appendChild(titre);
titre.innerHTML="Création dynamique d'éléments DOM";
</script>

<script type="text/javascript">
// création du paragraphe texte
var text=document.createElement("p");
text.style.fontFamily="Verdana";
text.style.fontSize="8pt";
// accrocher le paragraphe à l'élément "cadre"
cadre.appendChild(text);
text.innerHTML="Ce cadre et son contenu sont créés dynamiquement par l'instruction <br/><b>createElement(elem)</b><br/><br/>L'apparence de l'affichage est obtenu par les spécifications<br/><b>elem.style.spec1=valeur1<br/><b>elem.style.spec2=valeur2<br/>etc...</b>";
</script>

</body>
</html>


Afficher cette page


suivant