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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Appending and Removing Elements

Raquel Smith
Raquel Smith
10,683 Points

Does appending a list item to a new ul remove it from the one it was in previously?

In this video we grab a list item that already exists by checking a checkbox and we append that li to a different unordered list. So if I have an li in "incomplete tasks" and I click the checkbox to mark that it is complete, it is moved into my "completed tasks" ul.

To achieve this, we use the element.appendChild method. However, we never actually removed it from the original unordered list. So does taking an existing element (like a list item) and appending it to a new element automatically remove it from the original element? A metaphor would be.. appending an element is like cut & paste as opposed to copy & paste (where the original list item would still exist).

Thanks!

1 Answer

Steven Parker
Steven Parker
230,233 Points

:white_check_mark: You are correct. The DOM manipulations move an element's position.

If you want to leave an element as is and place a copy of it somewhere, you would first cloneNode to make the copy and then attach the copy where you want it in the DOM.

:information_source: A cloned node can optionally include all the element's descendants as well, if desired.