[DOM] inserer une LI

**totoche** · 13/11/2009, 09h37

Bonjour,

Je tente d'ajouter une <LI>, mais son positionnement s'effectue au niveau supérieur:

code Html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree">
<li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true"><a href="toto">Root node</a>		 
<ul>
    <li id="node1"><a href="#">Europe</a>
       <ul>
           <li id="node2" noDelete="true"><a href="#">Norway</a>
              <ul>
	     <li id="node3" noRename="true"><a href="#">Stavanger</a></li>
	     <li id="node6"><a href="#">Bergen</a></li>			 	     <li id="node7"><a href="#">Oslo</a></li>
	 </ul>
	</li>
	<li id="node8"><a href="#">United Kingdom</a>
....

.js

Code :

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
 
createItem : function(obj1,obj2)
		{
		var message = 'Ajouter un noeud sous :' + obj2.innerHTML + '\nidNode :' + obj2.parentNode.id +  '\nobj1 : ' + obj1.innerHTML;
		alert(message);
		 JSTreeObj = this;
                               var parentRef = obj2.parentNode;
                               var folderImg = document.createElement('IMG');
                               folderImg.src = this.imageFolder + this.sheetImage;
                               //Création du nouveau Noeud
                               var Nodenew = document.createElement('LI');
 
                               var newLink = document.createElement('a');
                                       newLink.setAttribute('href','removeChild.html');
                                               var linkText=document.createTextNode('TEST AJOUT');
                                               newLink.appendChild(linkText);
 
 
                               Nodenew.appendChild(folderImg);
                               Nodenew.appendChild(newLink);
                               parentRef.insertBefore(Nodenew);
         }

Le nouveau LI se positionne au niveau du <UL> auquel il appartient, j'ai joint les images pour mieux expliquer.

La source de cet exellent script :
http://www.dhtmlgoodies.com/

**E.Bzz** · 13/11/2009, 09h55

Bonjour,

Envoyé par totoche

Le nouveau LI se positionne au niveau du <UL> auquel il appartient

si je lis le début du code, c'est ce qui apparait

Code :

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

1
2
3
4
5
var message = 'Ajouter un noeud sous :' + obj2.innerHTML + '\nidNode :' + obj2.parentNode.id +  '\nobj1 : ' + obj1.innerHTML;
alert(message);
 JSTreeObj = this;
var parentRef = obj2.parentNode;

* ici tu proposes d'ajouter "sous obj2"
* ici tu définis le parent de l'objet créé comme étant le parent de obj2 => les 2 objets ayant le même parent, ils sont au même niveau, logique.
Pour créer le nouvel objet sous obj2, il faudrait

Code :

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

var parentRef = obj2;

A+

**totoche** · 13/11/2009, 10h05

Ce que je cherche à faire c'est d'inserer le noeud entre par exemple
Stavanger et Bergen,

Ex :

Code :

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

1
2
3
<li id="node3" noRename="true"><a href="#">Stavanger</a></li>
<li id="nodeXX"><a href="#">TEST AJOUT</a></li>
<li id="node6"><a href="#">Bergen</a></li>

**E.Bzz** · 13/11/2009, 10h12

J'ai bien compris ...
Mais tout dépend des objets que tu passes en paramètre à ta fonction.
Et comme on ne voit pas ces paramètres je t'explique juste le principe et ce que je constate dans ton code.
... et au passage que ta trace n'est pas correcte puisqu'elle n'affiche pas la bonne info : relis

A+

**totoche** · 13/11/2009, 10h22

Je pense que mon probleme viens du fait que je n'arrive pas a récupérer la balise <ul>, afin de faire le appendChild dessus, car en ajoutant:

Code :

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

1
2
3
4
5
 
var ul = document.createElement('UL');
ul.style.display='block';
parentRef.appendChild(ul);
ul.appendChild(Nodenew);

le positionnement est presque bon, il y a juste un petit décalage cf image

**totoche** · 13/11/2009, 11h14

Envoyé par E.Bzz

J'ai bien compris ...
Mais tout dépend des objets que tu passes en paramètre à ta fonction.
Et comme on ne voit pas ces paramètres je t'explique juste le principe et ce que je constate dans ton code.

la fonction :

Code :

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

createItem : function(obj1,obj2)

obj2 est le noeud cliqué ex :<li id="node3" noRename="true"><a href="#">Stavanger</a></li>

**E.Bzz** · 13/11/2009, 15h15

Envoyé par totoche

la fonction :

Code :

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

createItem : function(obj1,obj2)

obj2 est le noeud cliqué ex :<li id="node3" noRename="true"><a href="#">Stavanger</a></li>

Quel est exactement le noeud qui déclenche le createItem ?
Le <li> ou le <A> ?
Parce que si c'est le <A>, on se plante déjà d'un niveau (parentNode.parentNode) ...

A+

**E.Bzz** · 13/11/2009, 11h24

Si c'est le noeud cliqué, on en revient là

Envoyé par E.Bzz

Pour créer le nouvel objet sous obj2, il faudrait

Code :

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

var parentRef = obj2;

Par contre, je vois 2 cas à gérer :

ul existe déjà sous obj2 : il suffit d'y ajouter le nouveau <li>
ul n'existe pas encore sous obj2 : il faut créer <ul> avant d'y ajouter le nouveau <li>

A+

**totoche** · 13/11/2009, 11h39

Je suis un

,
voila la situation initiale

Code :

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

1
2
3
4
5
6
7
8
 
<li id="node2"><a href="#">Norway</a>
        <ul>
	<li id="node3"><a href="#">Stavanger</a></li>
	<li id="node6"><a href="#">Bergen</a></li>
	<li id="node7"><a href="#">Oslo</a></li>
        </ul>
</li>

après avoir cliqué sur Stavanger j'aimerai avoir :

Code :

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

1
2
3
4
5
6
7
8
9
<li id="node2"><a href="#">Norway</a>
        <ul>
	<li id="node3"><a href="#">Stavanger</a></li>  
       <li id="nodeX"><a href="#">Test</a></li>
	<li id="node6"><a href="#">Bergen</a></li>
	<li id="node7"><a href="#">Oslo</a></li>
        </ul>
</li>

avec var parentRef = obj2; Test s'affiche entre Stavanger et Bergen mais sous Norway, le <li> ne se crée pas dans le <ul>

**E.Bzz** · 13/11/2009, 11h51

Alors (dans ce cas au moins), il vaudrait mieux utiliser insertBefore() en prenant comme référence obj2.nextSibling()

... et encore, si il existe. Parce que sinon il faut revenir à appendChild() avec obj2.parentNode en référence

A+

**totoche** · 13/11/2009, 15h05

ça marche tjs pas

Je ne comprends pas j'ai utilisé la même démarche que pour le drag n' drop qui lui fonction.
en drag n' drop et dans createItem les nextSib.innerHTML sont identiques

Code :

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
 
createItem : function(obj1,obj2)		
		{
JSTreeObj = this;
 
var nextSib = obj2.parentNode.nextSibling;
 
var folderImg = document.createElement('IMG');
 
folderImg.src = this.imageFolder + this.sheetImage;
var Nodenew = document.createElement('LI');
var newLink = document.createElement('a');
newLink.setAttribute('href','test.html');
var linkText=document.createTextNode('Test');
newLink.appendChild(linkText);
Nodenew.appendChild(folderImg);
Nodenew.appendChild(newLink);
 
//Insertion du noeud dans l'arbre			
nextSib.parentNode.insertBefore(newLink,nextSib);

le nouveau noeud ne mets pas dans le entre Stavanger et Oslo j'ai quelque chose comme ça

Code :

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

1
2
3
4
5
6
7
8
9
 
<li id="node2" noDelete="true"><a href="#">Norway</a>
<li id="xxx"><a href='test.html'>Test</li>
<ul>
<li id="node3" noRename="true"><a href="#">Stavanger</a></li>
<li id="node6"><a href="#">Bergen</a></li>
<li id="node7"><a href="#">Oslo</a></li>
</ul>
</li>

[DOM] inserer une LI

JavaScript

Vue hybride

Discussions similaires

Partager

Partager