HTML Academy
Cloning and inserting elements, part 4
Working with DOM18/23
Back to the list of tasks
  • 1. What are you planning to do?
  • 2. The “change” event
  • 3. How the “change” event works
  • 4. Deleting the element from the list
  • 5. How to check the collection length
  • 6. Debugging the code
  • 7. Static and live collections
  • 8. Displaying the message on the page
  • 9. The “submit” event
  • 10. Cancelling the form submission
  • 11. How to obtain text from the input field
  • 12. Templates and the <template> tag
  • 13. The contents of the <template> tag, document-fragment
  • 14. Cloning and inserting elements, part 1
  • 15. Cloning and inserting elements, part 2
  • 16. Cloning and inserting elements, part 3
  • 17. Cloning and inserting elements, part 4
  • 18. How to clone elements
  • 19. Adding a new element to a list
  • 20. Deleting a new task in the list
  • 21. Clearing the input field
  • 22. Summary of “Actions with DOM”
  • 23. The third program: “Instant messenger”
Adding a new element to a list
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

How to clone elements

We have already figured out how to clone elements. Let’s return to our main task. We are continuing to work on the to-do list. We need to add new tasks to the list by clicking on the “Add new task” button.

We already found a task template and wrote it to the newItemTemplate variable. Let’s try to clone this template and write a copy to a new variable. Output the copy to the console to make sure that the copying operation works. We will use deep cloning to save all the elements in the task structure.

Comments

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The To-Do List</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1 class="visually-hidden">The To-Do List</h1> <ul class="todo-list"> </ul> <p class="empty-tasks">All of the tasks have been completed. There are no new tasks.</p> <form class="add-form" action="https://echo.htmlacademy.ru/courses" method="post"> <input class="add-form-input" type="text" placeholder="For example, buy an elephant" value="Go on a date" required> <button class="add-form-button" type="submit">Add new task</button> </form> <template id="task-template"> <li class="todo-list-item"> <label> <input type="checkbox" class="todo-list-input"> <span></span> </label> </li> </template> <script src="script.js"></script> </body> </html>
CSS
@font-face { font-weight: 400; font-family: "Muller"; font-style: normal; font-display: swap; src: url("fonts/Muller.woff") format("woff"); } body { margin: 40px 32px; font-size: 18px; line-height: normal; font-family: "Muller", sans-serif; } .visually-hidden, .todo-list-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); } .hidden { display: none; } .todo-list { margin: 0; padding: 0; list-style: none; } .todo-list-item { margin-bottom: 12px; } .todo-list-item label { display: block; padding: 12px 18px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); cursor: pointer; user-select: none; } .todo-list-item span { display: flex; align-items: center; } .todo-list-input + span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 16px; background-color: #ffffff; border: 2px solid #69b253; border-radius: 4px; } .todo-list-input:checked + span::before { background-color: #69b253; background-image: url("check-white.svg"); background-repeat: no-repeat; background-position: center; } .todo-list-input:not(:checked):hover + span::before, .todo-list-input:not(:checked):focus + span::before { background-color: rgba(105, 178, 83, 0.2); } .empty-tasks { color: #69b253; } .empty-tasks::before { content: ""; width: 14px; height: 13px; margin-right: 13px; background-image: url("check-green.svg"); background-repeat: no-repeat; background-position: center; } .add-form { display: flex; } .add-form-input { flex-grow: 1; box-sizing: border-box; height: 46px; margin-right: 16px; padding: 12px; font: inherit; border: 1px solid #a1b5c4; border-radius: 4px; } .add-form-input:focus { border: 1px solid #69b253; outline: none; } .add-form-input:hover { box-shadow: 0 0 6px rgba(105, 178, 83, 0.6); } .add-form-input::placeholder { color: #a1b5c4; } .add-form-button { flex-shrink: 0; padding: 12px; font: inherit; color: #ffffff; background-color: #69b253; border: none; border-radius: 4px; user-select: none; touch-action: manipulation; } .add-form-button:hover, .add-form-button:focus { background-color: #5aa045; outline: none; } .add-form-button:active { background-color: #42862e; }
JavaScript
var list = document.querySelector('.todo-list'); var items = list.children; var emptyListMessage = document.querySelector('.empty-tasks'); var newItemForm = document.querySelector('.add-form'); var newItemTitle = newItemForm.querySelector('.add-form-input'); var taskTemplate = document.querySelector('#task-template').content; var newItemTemplate = taskTemplate.querySelector('.todo-list-item'); var toggleEmptyListMessage = function () { if (items.length === 0) { emptyListMessage.classList.remove('hidden'); } }; var addCheckHandler = function (item) { var checkbox = item.querySelector('.todo-list-input'); checkbox.addEventListener('change', function () { item.remove(); toggleEmptyListMessage(); }); }; for (var i = 0; i < items.length; i++) { addCheckHandler(items[i]); } newItemForm.addEventListener('submit', function (evt) { evt.preventDefault(); var taskText = newItemTitle.value; // Declare a variable task here });

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Click inside the mini browser to put the focus in this window.

100%
Console
Goalscompleted
0
    1. At the end of the form submission handler function, create a variable task and clone the newItemTemplate element to it: newItemTemplate.cloneNode(true).
    2. On the next line, output the task variable to the console.
    3. Add a new task by clicking the “Add new task” button, then look at the console.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.