input dans un div

Version imprimable

input dans un div

Bonjour,
j'essaye de créer un DIV avec un input, le DIV et l'input sont associés par une feuille de style, la creation se fait par javascript.
Mais l'action sur le bouton ne produit rien :calim2:

css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
div#identification {
	width:300px;
	height:300px;
	background-color:#FFCC00;
	}
 
 
div#identification.input.nomTextBox{	
		font-size:10px;
		margin:0px;
		padding:0px;
		height:12px;
	}
 
div#identification.input.prenomTextBox{	
		position:relative;
		top:20px
		font-size:10px;
		margin:0px;
		padding:0px;
		height:12px;
	}

html + js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<html>
<head>
<script language="javascript">
function createMasque()
		{
			var myDiv = document.createElement('DIV');
			myDiv.className = 'identification';
 
			var textBox = document.createElement('INPUT');
			textBox.className = 'nomTextBox';
			textBox.id = 'textBoxNom' 
			textBox.value = "test";
		}
</script>
<link rel="stylesheet" href="f.css" type="text/css"></link>
</head>
<body>
<input type='button' onclick='createMasque();'>
</body>
</html>

Merci de votre aide

12/11/2009, 15h32
vermine
Bonjour,

Créer les éléments, c'est bien. Maintenant, il faut les attacher à leur parent.
Code:

1 2 myDiv.appendChild(textBox);
12/11/2009, 15h41
totoche

merci,
j'ai tjs rien qui s'affiche

Hé bien oui, j'ai dis qu'il faut "les" rattacher à "leur" parent. J'ai trouvé le parent de "textBox" mais qui est le parent de "myDiv" ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <body> <form id="monForm"> <input type='button' onclick='createMasque();'> </form> </body> <script> //La fonction blabla bla ... myDiv.appendChild(textBox); monForm.appendChild(myDiv); ... </script>

12/11/2009, 15h52
totoche
merci, ça fonctionne en partie l'input s'affiche:ccool:
Code:

1 2 3 4 5 6 7 8 9 10 ... document.getElementById('tst').appendChild(myDiv); .. } </script> <link rel="stylesheet" href="f.css" type="text/css"></link> </head> <body id="tst"> ...
, mais les propriétés de la feuillle de style ne sont pas prises en compte...:aie:
12/11/2009, 15h56
vermine
Ouf là niveau CSS je ne m'y connais pas trop.
A la place de .className, c'est peut-être .class ?
Code:

1 2 3 myDiv.class = 'identification'; textBox.class = 'nomTextBox';
12/11/2009, 15h59
SpaceFrog

non c'est bein className

jette un oeil dans les contributions il y a un petit script de creation dynamique d'objets ...
12/11/2009, 16h16
Bovino
Oui, c'est bien className, en revanche, tes déclarations de styles sont à revoir :
Code:

1 2 3 4 5 6 7 8 div#identification { } div#identification.input.nomTextBox{ } div#identification.input.prenomTextBox{ }
A titre d'exemple, avec une notation : div#identification.input.prenomTextBox tu affectes un style à une div qui a :
- Pour id identification (le '#')
- Un classe input (le ".input")
- Et une classe prenomTextBox (".prenomTextBox")
Au cune div de ta page ne possède toutes ces propriétés. La bonne syntaxe serait :

Code:

div.identification input.prenomTextBox

Là tu cherches bien dans la div dont la classe est identification les input dont la classe est prenomTextBox ;)