Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Move dynamically a DOM objet up

Move dynamically a DOM objet up

05/13/2011 by Dux   -   4.3/5 (3 ratings)

When you display elements as list, it is sometimes necessary to provide the classification of the lines. This function can raise an object of a level. Eg. when displaying a list of products.
The verification of the nodeType is used to circumvent a problem in some browsers that carriage returns and spaces between two objects as a "objet text".
To do the opposite, use nextSibling

Demo.

With DIV (click on a row)
DIV 1
DIV 2
DIV 3


With TABLE TR
ROW 1
ROW 2
ROW 3

source code



 
function monte_o(idelm) {
   var
en = document.getElementById(idelm);
   var
test = en.previousSibling;
   if (
en.previousSibling){
       
en.parentNode.insertBefore(en,en.previousSibling);
       if (
test.nodeType == 3) {
           
monte_o(idelm);
       } else {
           
// action when the element is ascended
       
}
   }
}


<
div id="div1" onclick="monte_o(this.id)" style="background:cyan">DIV 1</div>
<
div id="div2" onclick="monte_o(this.id)" style="background:yellow">DIV 2</div>
<
div id="div3" onclick="monte_o(this.id)" style="background:magenta">DIV 3</div>

Tested with Safari  Google Chrome  Firefox3  Firefox4  IE6  IE7  
Rate this code     |     Copied : 20x

Comments for Move dynamically a DOM objet up

No comment
Add a comment Nickname
ZOOM


Move dynamically a DOM objet up
Extract links from a page
Extract images from a page
Dynamically add rows to a form. Complete solution
Dynamically resizing height of textarea
Show hide DIV content with scrolling
Force file download