[DOM] innerHtml ne met pas le texte où je voudrais

**knice** · 28/09/2008, 15h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**Auteur** · 29/09/2008, 13h17

bonjour,

en html un tableau a au moins cette forme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<table>
   <tr>
    <td>
       contenu de la cellule  
    </td>
    <td>
       contenu de la cellule
    </td>
   </tr>
   <tr>
    <td>
       contenu de la cellule  
    </td>
    <td>
       contenu de la cellule
    </td>
   </tr>
</table>

Seules les balises TD peuvent contenir d'autres composants HTML !!
Donc encadrer tes balises TR de DIV c'est une grosse erreur au niveau du DOM !

Pour ajouter ou supprimer des lignes dans un tableau, il faut passer par des fonctions DOM voir ces liens :
FAQ, la balise TABLE
un exemple complet