Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Using previousElementSibling and insertBefore

Posted by cyber voyager
cyber voyager
8,859 Points

Detailed explanation on some code

I would be very great full if someone would like to explain to me the code bellow, I don't know why but I have a hard time understanding the way the teacher explains himself, he doesn't explain the subjects in detail and goes into a new subject in every video... 

if (event.target.className == 'up') {
        let li = event.target.parentNode;
        let prevLi = li.previousElementSibling;
        let ul = li.parentNode;
        if (prevLi) {
            ul.insertBefore(li, prevLi);
        }

2 Answers

Devin Galloway
Devin Galloway
3,990 Points
Devin Galloway
Devin Galloway
3,990 Points 
if (event.target.className == 'up') {   //run function if the target of the 'click' events  
                                                                   //classname is 'up'

        let li = event.target.parentNode;          //whatever was clicked, get parentNode (in this 
                                                                      //case 'BUTTON' was clicked and it's parentNode 
                                                                      //is a 'li' element. So the variable 'li' will get the 
                                                                      //html element li.                                            

        let prevLi = li.previousElementSibling; //this assigns prevLi to the sibling of li (the 
                                                                      //sibling of li is another list item, so prevLi gets 
                                                                      //the 'li' before our first 'li'.

        let ul = li.parentNode;                          //this assigns the parent of 'li' to a variable. The 
                                                                     //parent element //is the 'ul' element.

        if (prevLi) {                             // if there is a previous list item to work with..
           ul.insertBefore(li, prevLi);   //then call insertBefore() method on ul, which will insert 
                                                        //the 'li' argument before the 2nd argument, prevLi (the 
                                                        // *reference node*)
        }
cyber voyager
cyber voyager
8,859 Points

Thank you very much, I figure it out along time ago but still I appreciate your answer, I hope it can help somebody in need

barnetobeka
PLUS
barnetobeka
Courses Plus Student 10,895 Points
barnetobeka
barnetobeka
Courses Plus Student 10,895 Points

*First try reading the jquery API documentation *

The program is a bubbling one it first looks for a className "Up" after it has been found It looks for its parent and stores it into li variable Then stores the previous sibling of the target if any into the prevLi Then stores the parentNode of the li variable into the ul Then the program tests whether the li has a previous sibling if Yes Before reaching the ul from the current target it inserts the Target with className of "UP"