Insertion DIV entre 2 DIV

Version imprimable

Bonjour,

Je souhaite insérer une DIV entre deux DIV déjà existante, j'essaye de le faire avec la fonction insertBeforee mais j'ai une erreur :

Citation:

Argument 1 of Node.insertBefore is not an object.
Line 11

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
25
26
27
28
29
30
31
32
33
34
35
36
<div id="Tableau">
	<div id="Entetes">
		<div id="Visu">
			<h6>Visualiser</h6>
		</div>
		<div id="AdresseMac">
			 <h6>Adresse Mac</h6>
		</div>
		<div id="Tag">
			 <h6>Tag</h6>
		</div>
		<div id="NbPts">
			 <h6>Nombre points</h6>
		</div>
		<div id="Op">
			<h6>Op</h6>
		</div>
	</div>
	<div id='Sondes'>
		<div id='Visu'>
			<img src='oeil.png'>
		</div>
		<div id='AdresseMac'>
			<input type='text' class='champsConf' id="@MAC" size='20' maxlength='23' value='XX-XX-XX-XX-XX-XX-XX-XX'>
		</div>
		<div id='Tag'>
			<input type='text' class='champsConf' id="@TAG" size='20' maxlength='16' >
		</div>
		<div id='NbPts'>
			<input type='text' class='champsConf' id="@NBPTS" size='4' maxlength='2'>
		</div>
		<div id='Op'>
		        <img src='plus.png' onclick="addSonde();">
	        </div>
	</div>
</div>

Et ma fonction addSonde qui doit donc insérer entre les DIV Entetes et Sondes une nouvelle DIV Sondes:

Code:

1
2
3
4
5
6
function addSonde() {	
	var nouvelleDIV = "<div id='Sondes'></div>"; //je vous épargne le contenu de cette div
	var parent = document.getElementById("Tableau");
 
	parent.insertBefore(nouvelleDIV,parent.lastChild);
}

Je pense que ça vient peut être de ma façon de créer ma nouvelle DIV mais je n'en suis pas sur =/

Si vous avez des questions n'hésitez pas !
Merci d'avance :)

08/11/2013, 15h50
NoSmoking

Bonjour,
dans ton code nouvelleDIV est une chaine de caractère et rien d'autre.
Il te faut pour utiliser la méthode insertBefore que le premier paramètre soit un noeud.
Il te faut donc créer ton élément via la méthode createElement avant l'insertion.

Merci pour la réponse rapide !

J'ai donc modifié mon code javascript comme suit:
Code:

1 2 3 4 5 6 7 8 function addSonde(){ var chaine = "<div id='Sondes'></div>"; var nouvelleDIV = document.createElement(chaine); parent = document.getElementById("Tableau"); parent.insertBefore(nouvelleDIV,parent.lastChild); }
Et j'obtient l'erreur suivante :

Citation:

InvalidCharacterError: String contains an invalid character

J'ai vu que la fonction createElement prend en paramètre des types connus,
par exemple:

Code:

createElement("BUTTON")

il n'y a aucun moyen de créer un élément à partir d'une chaine ?
Le contenu de ma DIV est assez énorme et ça va être laborieux avec des appendChild() :aie:

Code:

1
2
var nouvelleDIV = document.createElement('div');
nouvelleDIV.id='Sondes';

Merci !
Si une solution plus rapide existe je suis preneur :mrgreen:
Je commence à tout taper, je vais en avoir pour quelques heures je crois :aie:

Edit:
Bon je m'heurt rapidement à un nouveau problème :(
Dans la div que je viens de créer je veux en recréer une j'ai donc modifié mon code javascript ainsi:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function addSonde(){ var DivSondes = document.createElement('div'); DivSondes.id='Sondes'; var DivVisu = DivSondes.createElement('div'); DivVisu.id='Visu'; var ImgVisu = DivVisu.createElement('img'); ImgVisu.src='oeil.png'; parent = document.getElementById("Tableau"); parent.insertBefore(DivSondes,parent.lastChild); }
Comment faire pour que ma DIV Visu soit imbriquée dans la DIV Sondes ?

L’exécution me retourne l'erreur suivante :

Citation:

DivSondes.createElement is not a function

Line 10

A la rigueur, tu peux juste créer le conteneur avec createElement() puis lui affecter du contenu à l'aide de innerHTML :
Code:

1 2 3 4 5 var codeDIV = 'code HTML du contenu de ta div'; var nouvelleDIV = document.createElement('div'); nouvelleDIV.id = 'Sondes'; parent.insertBefore(nouvelleDIV,parent.lastChild); nouvelleDIV.innerHTML = codeDIV;

08/11/2013, 16h22
Ashkandie

Merci c'est exactement ce qu'il me fallait :D
Bon par contre ça s'ajoute après ma DIV Sondes et pas entre la DIV Entetes et la DIV Sondes :calim2:
Surement une erreur sur le lastChild ou quelque chose de ce genre.

Edit: Avec firstChild ça se met bien avant, mais avant Entetes :aie:
Je comprend pas pourquoi avec lastChild ça se met après Sondes 8O
08/11/2013, 16h59
NoSmoking

Citation:

Edit: Avec firstChild ça se met bien avant, mais avant Entetes :aie:
Je comprend pas pourquoi avec lastChild ça se met après Sondes 8O

à cause de la construction du DOM qui fait que sous certains navigateur les retour à la ligne sont pris en compte, teste en mettant tout ton code à la suite sur la même ligne.

Pour éviter cela tu peux utiliser children qui ne reprend en compte que les "vrais noeuds" et pour atteindre le dernier il te suffit de faire, sans parcours,

Code:

oParent.children[oParent.children.length-1]

Plusieurs remarques quand même
- tu crées une DIV id="Sondes" alors que l'ID existe déjà, pas bon ça!
- comme tes autres DIV possèdent des ID pourquoi ne pas cibler directement avec un var oCible = document.getElementById('Sondes');.
- l'utilisation de variable au nom de parent n'est pas du meilleur choix.
25/11/2013, 08h36
Ashkandie

Merci pour ces précisions ça fonctionne comme je le souhaite :ccool:

Pour l'ID sonde celui ci change en fonction du numéro de la sonde.

Merci encore !
25/11/2013, 22h25
Watilin

Juste pour info : lastElementChild renvoie le dernier nœud de type Element, ce qui exclut les nœuds de texte.
26/11/2013, 20h11
NoSmoking

Citation:

Juste pour info : lastElementChild...

Exact même si ce n'est pris en compte qu'à partir de IE9 il est bon de le dire.
27/11/2013, 01h18
Watilin

IE8 ? C'est quoi ? Windows XP ? J'ai déjà oublié moi… :mrgreen: