[DOM] innerHtml ne met pas le texte où je voudrais
Bonjour, j'ai un soucis avec innerHtml. J'aimerais faire un formulaire qui se modifie en fonction du choix des gens.
Par exemple, en fonction de si la personne choisit 'appart' ou 'maison'.
Voici mon code HTML :
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
| <table>
<div id="bien" >
<tr>
<td><label for="type_bien">Type de bien :</label>
</td>
<td><select name="type_bien" id="type_bien" onchange='changerForm(document.getElementById("type_bien").value)' >
<option value="1" >Appartement</option>
<option value="2" >Maison</option>
</select>
</td>
</tr>
</div>
<div id="appart" >
<tr id="appart1" >
<td><label for="etage">Etage :</label></td>
<td><input name="etage" id="etage" /></td>
</tr>
</div>
<div id="maison" >
</div>
</table> |
et voici mon Javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script language="Javascript">
function changerForm(type_bien) {
if ( type_bien == "2" )
{
document.getElementById("appart1").innerHTML = '';
document.getElementById("maison").innerHTML = '<tr id="maison1" ><td><input name="button_maison" id="button_maison" value="coucou1" /><br/></td><td><input name="button_maison2" id="button_maison2" value="coucou2" /></td></tr>';
}
else
{
document.getElementById("appart1").innerHTML = '<tr id="appart1" ><td><label for="etage">Etage :</label></td><td><input name="etage" id="etage" /></td></tr>';
document.getElementById("maison1").innerHTML = '';
}
}
</script> |
Et voici mon problème :
Lorsque je clique sur 'maison', il me rajoute les champs au tout début. Alors que mon code HTML précise qu'il devrait apparaître après (cf le div "maison').
De même, si je clique ensuite sur 'appart', l'input 'etage' réapparait, mais décalé sur la droite :/
Quelqu'un sait-il pourquoi ça se passe ainsi ?
Merci par avance !
