Discussion :

[Ashkandie]

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 :

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

Voici mon code HTML :

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
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 :

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

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

[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.

[Ashkandie]

Merci pour la réponse rapide !

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

Code :

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

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 :

InvalidCharacterError: String contains an invalid character

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

Code :

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

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()

[SpaceFrog]

Code :

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

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

[Ashkandie]

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

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 :

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

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 :

DivSondes.createElement is not a function

Line 10

[Bovino]

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

Code :

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

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;

[Ashkandie]

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

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

[NoSmoking]

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

à 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 :

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

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.

[Ashkandie]

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

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

Merci encore !

[Watilin]

Juste pour info : lastElementChild renvoie le dernier nœud de type Element, ce qui exclut les nœuds de texte.

[NoSmoking]

Juste pour info : lastElementChild...

Exact même si ce n'est pris en compte qu'à partir de IE9 il est bon de le dire.

[Watilin]

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