Cherche plutôt du coté de innerHTML qui te permettra de n'ajouter que le nécessaire à un endroit précis.
Pour illustrer ce qu'on peut faire, voici une page complète qui te permet d'ajouter une ligne de saisie au besoin. Je mets ça tel quel, ça ne répond peut-être pas exactement à ce que tu cherches, en revanche tous les éléments dont tu as besoin s'y trouvent. À toi d'adapter à ton propre besoin.
<?php
session_start();
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Ajout dynamique de lignes de saisie dans un formulaire</title>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
body {
font-family: verdana, helvetica, sans-serif;
font-size: 85% !important;
}
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
padding: 0.25em;
}
form {
width: 300px;
position: relative;
top: 5em;
left: 50%;
margin-left: -150px;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
function ajoutligne(i)
{
var f = document.forms['test'];
var j = i + 1;
var idNom = 'nom_'+ i;
var lignes = document.getElementById('table_form');
/**
* Comptage des lignes du lignes :
* tous les éléments
* moins le bouton submit
* et le reste divisé par le nombre de colonnes (ici 3)
*/
var nbl = (f.elements.length - 2) / 3;
var chaine = '';
/* D'abord, on récupère les valeurs courantes du formulaire */
var noms = new Array;
var prenoms = new Array;
for(var l = 0; l < nbl; l++)
{
var index_n = 'nom_'+ l;
var index_p = 'prenom_'+ l;
noms[l] = f.elements[index_n].value;
prenoms[l] = f.elements[index_p].value;
}
/* Si on est sur la dernière ligne et que la valeur nom n'est pas vide, on rajoute la ligne de lignes */
if(f.elements[idNom].value != '')
{
if(i == (nbl - 1))
{
/* Construction de la chaine vide à ajouter éventuellement */
/* Ajout d'une ligne vide */
var nouvelleLigne = document.createElement("tr");
var creerLigne = lignes.appendChild(nouvelleLigne);
/* Création des cellules */
var cell_1 = document.createElement("td");
var cell_2 = document.createElement("td");
var cell_3 = document.createElement("td");
/* Insertion des cellules dans la ligne */
var creerCell_1 = creerLigne.appendChild(cell_1);
var creerCell_2 = creerLigne.appendChild(cell_2);
var creerCell_3 = creerLigne.appendChild(cell_3);
/* Création des champs de formulaire */
var champ_1 = document.createElement("input");
var champ_2 = document.createElement("input");
var champ_3 = document.createElement("input");
/* Création des attributs pour chaque champ */
/**
* On commence par vérifier le navigateur utilisé.
* Si en effet on a besoin d'un gestionnaire d'évènement, Internet explorer n'interprètera pas
* de la même manière l'attribut ajouté.
*/
var isExplorer = ((navigator.userAgent.toLowerCase().indexOf('msie')!=-1) && (navigator.userAgent.toLowerCase().indexOf('opera') == -1)) ? true : false;
if(isExplorer == true)
{
/* Le navigateur est Internet Explorer */
var idChamp = 'nom_'+ j;
champ_1.onchange = function(){if(document.forms['test'].elements[idChamp].value != ''){ajout();}};
}
else
{
champ_1.setAttribute("onchange", "if(this.value != ''){ajout();}");
}
/* Ajout des autres attributs de la balise */
champ_1.setAttribute("type", "text");
champ_1.setAttribute("name", "nom[]");
champ_1.setAttribute("id", "nom_"+ j);
champ_1.setAttribute("title", "Inscrivez un nom de famille");
champ_1.setAttribute("value", "");
champ_2.setAttribute("type", "text");
champ_2.setAttribute("name", "prenom[]");
champ_2.setAttribute("id", "prenom_"+ j);
champ_2.setAttribute("title", "Inscrivez un prénom");
champ_2.setAttribute("value", "");
champ_3.setAttribute("type", "checkbox");
champ_3.setAttribute("name", "supprligne[]");
champ_3.setAttribute("id", "supprligne"+ j);
champ_3.setAttribute("title", "Supprimer la ligne");
/* Insertion des champs dans chaque cellule */
creerCell_1.appendChild(champ_1);
creerCell_2.appendChild(champ_2);
creerCell_3.appendChild(champ_3);
var idPrenom = 'prenom_'+ i;
f.elements[idPrenom].focus();
/* Ajout dans la page d'une ligne supplémentaire indiquant le nombre de lignes ajoutées */
var info = document.createElement('p');
f.appendChild(info);
info.setAttribute('style', 'font-size: 10px;');
var j = i;
j = (j + 2);
info.appendChild(document.createTextNode('Création de la ligne '+ (j)))
}
}
else
{
alert('Le premier champ de la dernière ligne (ligne '+ nbl +') est vide.\n Aucune nouvelle ligne ne pourra être ajoutée.');
}
}
function ajout()
{
/* Comptage du nombre de lignes en cours */
var compte = (((document.forms['test'].elements.length) - 2) / 3) -1;
// alert(compte);
ajoutligne(compte);
}
/* ]]> */
</script>
</head>
<body>
<?php
if(isset($_POST['envoi']))
{
echo("<pre>\n");
var_dump($_POST);
echo("</pre>\n");
}
?>
<form id="test" action="" method="post">
<?php
/**
* Initialisation d'un pointeur de départ pour les attributs id des champs de saisie du formulaire.
* On ne peut en effet pas avoir deux fois le même identifiant dans une même page HTML. Donc à chaque
* ligne ajoutée, il faudra un nouvel identifiant. Ce dernier sera géré dynamiquement en JavaScript.
*/
$i = 0;
?>
<table summary="">
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Supprimer</th>
</tr>
</thead>
<tbody id="table_form" >
<tr>
<td><input type="text" name="nom[]" id="nom_<?php echo($i); ?>" title="Inscrivez un nom de famille" value="" onchange="if(this.value != ''){ajout();}" /></td>
<td><input type="text" name="prenom[]" id="prenom_<?php echo($i); ?>" title="Inscrivez un prénom" value="" /></td>
<td><input type="checkbox" name="supprligne[]" id="supprligne<?php echo($i); ?>" title="Supprimer la ligne" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<input type="submit" name="envoi" id="envoi" value="Valider" />
<input type="button" name="cnl" id="cnl" value="Ajouter une ligne de saisie" onclick="ajout();" />
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
Enregistre-ça tel quel et affiche la page pour tester le fonctionnement, ensuite, fouille le code, les commentaires devraient t'aider pas mal à avancer
