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;