remove, replaceWith, cloneNode and insertAdjacentHTML
A removed element still exists while a variable holds it, so replaceChildren(gone) could put it back, after emptying the box in the same call.
document.createElement makes a new element that lives nowhere until you insert it with append, prepend, before, after or replaceWith; remove takes it out, inserting an existing element moves it, and <template> gives you ready-made markup to clone.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write addTask(text) that appends an <li class="task"> with the given text to #tasks and returns the new element. Add two tasks and log the list's texts.
Write moveToDone(li) that moves a task from #todo to the start of #done, and log both lists' lengths afterwards.
Using a <template> with a <tr>, render the rows [["Asha", 91], ["Ravi", 78]] into a <tbody> and log the number of rows.
Explain it without notes
Walk through creating a list item with text and a class and adding it as the first item of a list.
What happens when you append an element that is already in the document? How do you get a copy instead?
What is the <template> element for, and how do you use it?
Compare append with appendChild, and remove with removeChild.
Preview
Console
Nothing logged yet.Expected console output
false Delete me
[ 'new', 'copy', 'adj' ]
null
1 <p#gone>