Dom Insérer element

17 nov. 2009, 16:48

Bonjour,

Je souhaiterai insérer un élément de plusieurs élément dans un formulaire
mon formulaire est composé de cette façon :

Code : Tout sélectionner

<p>
<label>none</lable>
<inpu type="text" name="none"/
</p>

dans ce même formulaire j'ai un select liste avec un onchange.
Le but était d'ajouter certain élément en fonction du choix dans la liste
et peux être amené à créer plusieurs champ texte pour un choix !

J'arrive à créer un élément mais pas le placer de façon précise dans le formulaire déjà existant !
mais je n'arrive pas à le placer de façon précise dans le formulaire...

Code : Tout sélectionner

function createField(id)
{
	divParent	= document.getElementById("ads_form");
	p			= document.createElement('p');
	lab 		= document.createElement('label');
	field		= document.createElement('input');

	paragraphe	= document.getElementsByTagName('p');

	selObj = document.getElementById("category");
	cible = document.getElementById("name");

	field.setAttribute('type', 'text');
	field.setAttribute('name', id);

	lab.appendChild(document.createTextNode(id + " : "));

	p.appendChild(lab);
	p.appendChild(field);

	divParent.appendChild(p);
}

je penses pas être loin mais je bloque !
il faudrais que j'utilise next ou previousSybling mais j'ai encore du mal avec le dom !

Merçi pour votre aide !

17 nov. 2009, 17:52

Pour info, la méthode appendChild () ajoute l'élément enfant à la fin ; si tu veux ajouter ton élément enfant à un rang précis, regarde du côté de la méthode insertBefore ().

17 nov. 2009, 23:45

Merci pour ton lien qui est pas mal !
je savais pas que firefox faisait dans le formation lol

après avoir lu le lien que tu m'a passé j'arrive à mieux placer mes éléments mais il me reste encore un souci
au dessus de l'élément que je doit placer ça fais ceci :
je schématise mais l'élément s'insert dans un autre élément p au lieu d'être au-dessous

Code : Tout sélectionner

<p>
   <label>Mon élément nouveau </label>
   <select id="category">option</select>
   <p>
       <label>none</label>
       <input type="text">
    </p>
</p>

// il devrait être la ^^

Mon code :

Code : Tout sélectionner

function createField(id)
{
	var paragraphe	= document.createElement('p');
	var lab 		= document.createElement('label');
	var field		= document.createElement('input');
	var titleLabel	= document.createTextNode(id + " : ");

	lab.appendChild(titleLabel);
	lab.setAttribute('for', id);
	paragraphe.appendChild(lab);
	paragraphe.appendChild(field);

	field.setAttribute('type', 'text');
	field.setAttribute('name', id);

	var selectObj	= document.getElementById('category');
	var parentP	= selectObj.parentNode;

	parentP.insertBefore(paragraphe, selectObj.nextSibling);

}

++

17 nov. 2009, 23:51

Remonte au niveau du parent du nœud indiqué dans le second paramètre de la méthode insertBefore ().

18 nov. 2009, 00:02

Merci j'ai essayé mais cela ne fonctionne pas !
je m'y suis surement mal pris !

j'ai fais :

Code : Tout sélectionner

function createField(id)
{
	var paragraphe	= document.createElement('p');
	var lab 		= document.createElement('label');
	var field		= document.createElement('input');
	var titleLabel	= document.createTextNode(id + " : ");

	lab.appendChild(titleLabel);
	lab.setAttribute('for', id);
	paragraphe.appendChild(lab);
	paragraphe.appendChild(field);

	field.setAttribute('type', 'text');
	field.setAttribute('name', id);

	var selectObj	= document.getElementById('category');
	var parentP		= selectObj.parentNode;

	parentP.insertBefore(paragraphe, selectObj.parentNode.nextSibling); // ICI J'AI RAJOUTER LA METHODE parentNode MAIS CA NE FONCTIONNE PLUS

}

Dom Insérer element

Qui est en ligne