Déplacer un élément dans le dom

Version imprimable

Bonjour,

imaginons que j'ai les divs suivantes :
Code:

1 2 3 4 5 <div id="conteneur"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
j'aimerai que lorsque l'on clique sur une div 'box' elle passe au premier plan, donc après le dernier élément fils de "conteneur".
Code:

1 2 3 4 5 6 7 8 9 10 11 function premierplan(obj) { obj.insertAfter(obj.parentNode.lastChild); } <div id="conteneur"> <div class="box" onclick="premierplan(this)"></div> <div class="box" onclick="premierplan(this)"></div> <div class="box" onclick="premierplan(this)"></div> </div>
Mais cela ne fonctionne pas.
Merci de votre aide.

premier plan ???
je ne saisi pas bien cette notion...

Par contre si il s'agit juste de placer le div à la fin du parent ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function premierplan(obj)
{
	obj.parentNode.appendChild(obj);
}
</script>
</head>
<body>
<div id="conteneur">
   <div class="box" onclick="premierplan(this)">1</div>
   <div class="box" onclick="premierplan(this)">2</div>
   <div class="box" onclick="premierplan(this)">3</div>
</div>
</body>
</html>

il y a aussi la solution de cloner la node et de la réinsérer en tant que dernier enfant (lastchild) puis supprimer l’élément d'origine car la norme au niveau de la position des élément fait que le dernier élément inséré se trouve au dessus des autres le tout en faisant abstraction du zIndex

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
37
38
39
40
41
42
43
44
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
.box, .box3, .box2{
position:absolute;
background-color:gray;
height:200px;width:250px;
margin-top:100px;
border:1px ridge #aaa;
-moz-box-shadow: 10px 10px 10px #212121;
-webkit-box-shadow: 10px 10px 10px #212121;
box-shadow: 10px 10px 10px #616161;
}
 
.box2{
left:150px;
}
 
.box3{
left:300px;
}
 
</style>
 
<script type="text/javascript">
function premierplan(obj)
{
var lanodeclone=obj.cloneNode(true);
obj.parentNode.appendChild(lanodeclone)
obj.parentNode.removeChild(obj);
}
</script>
</head>
<body>
<div id="conteneur">
   <div class="box" onclick="premierplan(this)">1</div>
   <div class="box2" onclick="premierplan(this)">2</div>
   <div class="box3" onclick="premierplan(this)">3</div>
</div>
</body>
</html>