[JS/DOM] Création d'objets à la volée

Version imprimable

Bonsoir,
Je suis presque débutant, je souhaite créer diverses balises HTML à la volée en fonction des données d'une table MySQL.
J'ai trouvé cette librairie créée et documenté par SpaceFrog : http://www.developpez.net/forums/d53...ynamique-form/ qui fait tout, presque même le café ;); mais mon souci c'est que je n'arrive pas à positionner les objets créés dans le div prévu à cet effet.
Comment indiquer un div parent ?
Voici l'un de mes tests :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<body>
		<div id="global">
			<form name="FormCreation" id="FormCreation" method="post" action="Traitement.php">										<!-- 'form' est un formulaire ; 'method="post"' on récupère les données par $_POST ; 'action="/Cthulhu/_MIcrePJtt.php"' est la page appelée -->
				<fieldset class="conteneur" name="FS" id="FS"><legend>Mon contenu</legend>
					<div class="CadreDiv" id="DivTest" >
						<script type='text/javascript'>
                                                                var myselect =  $C({'obj':'select',"id":"monid","name":"montexte",'css':{'color':'red'}}) ;
                                                                $C({'obj':'option', 'id':'Opt1', 'value':'1','innerHTML':'option 1'}) ;
                                                                $C({'obj':'option', 'id':'Opt2', 'value':'2','innerHTML':'option 2'}) ;
                                                                $C({'obj':'option', 'id':'Opt3', 'value':'3','innerHTML':'option 3'}) ;
                                                                $Close(myselect);
 
                                                </script>
					</div>
				</fieldset>
			</form>
		</div><!-- #global -->
	</body>
</html>

et le résultat obtenu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
		<div id="global">
			<form name="FormCreation" id="FormCreation" method="post" action="Traitement.php">										<!-- 'form' est un formulaire ; 'method="post"' on récupère les données par $_POST ; 'action="/Cthulhu/_MIcrePJtt.php"' est la page appelée -->
				<fieldset class="conteneur" name="FS" id="FS"><legend>Mon contenu</legend>
					<div class="CadreDiv" id="DivTest">
						<script type="text/javascript">
                                                                var myselect =  $C({'obj':'select',"id":"monid","name":"montexte",'css':{'color':'red'}}) ;
                                                                $C({'obj':'option', 'id':'Opt1', 'value':'1','innerHTML':'option 1'}) ;
                                                                $C({'obj':'option', 'id':'Opt2', 'value':'2','innerHTML':'option 2'}) ;
                                                                $C({'obj':'option', 'id':'Opt3', 'value':'3','innerHTML':'option 3'}) ;
                                                                $Close(myselect);
 
                                                </script>
					</div>
				</fieldset>
			</form>
		</div><select id="monid" name="montexte" style="color: red;"><option id="Opt1" value="1">option 1</option><option id="Opt2" value="2">option 2</option><option id="Opt3" value="3">option 3</option></select><!-- #global -->
 
</body></html>

mon select se crée après le div <div class="CadreDiv" id="DivTest">et non dedans.
Pouvez-vous m'indiquer ce que je dois faire pour arriver à mes fins?
Merci

19/02/2018, 21h55
danielhagnoul
Citation:

Envoyé par MelkInarian

[...] mon souci c'est que je n'arrive pas à positionner les objets créés dans le div prévu à cet effet.
Comment indiquer un div parent ? [...]

:salut:

Le sélecteur parent n'existe pas en CSS3, mais il est annoncé en CSS4 :
Code:

1 2 3 ul li! a.active { color: red; }
Pour styler les éléments "li" dont les fils "a" possèdent la classe active.

En attendant CSS4, il faut :
1. un identificateur sur le parent
2. ou utiliser Sel
3. ou utiliser jQuery

Citation:

Envoyé par danielhagnoul

Le sélecteur parent n'existe pas en CSS3, mais il est annoncé en CSS4 :

Tant pis, si c'est impossible à adresser je vais me débrouiller autrement, mais c'est dommage.
je ferai pour chaque balise un truc du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
	function CreerSelect(idParent, idSelect, nameSelect, sizeSelect, ClasseSelect, OnQqChose, Fonction, idOpt, Toptions)
	{
		try
		{
			var conteneur = document.getElementById(idParent);
			var selection = document.createElement('select');
			selection.setAttribute('id', idSelect);
			selection.setAttribute('name', nameSelect);
			selection.setAttribute('size', sizeSelect);
			selection.setAttribute('class', ClasseSelect);
			selection.setAttribute(OnQqChose, Fonction);
 
			for (var i = 1 ; i <= Toptions.length ; i++)
			{
				var element = document.createElement("option");
				element.setAttribute('value', (i - 1));
				element.setAttribute('id', idOpt + i);
 
				var texte = document.createTextNode(Toptions[i-1] ); 
				element.appendChild(texte);
				selection.appendChild(element);
			}
			conteneur.appendChild(selection);
		}
		catch(e) { alert(e); }
	}

mais ce sera un script beaucoup moins compact.
Merci quand même danielhagnoul!