Theory
Theory
Comments

Cloning and inserting elements, part 1

We saved the template for future assignments. All that remains to be done is to apply this template to our code so that we can design the new task based on it. In order to do this, let’s put aside our to-do list for the moment and examine another DOM API method.

You can’t just take a single element and add it multiple times to the page. It can occupy only one position in the document at a time. Inserting it elsewhere moves it instead of creating a copy.

Let’s make sure of this by taking a look at an example.

Let’s bring up a block with numbered cards. The template for a card is stored in the template tag.

<body>
  …
  <template id="element-template">
    <div class="el">
      <span></span>
    </div>
  </template>
</body>

One card element from the template has been inserted in the page. This code has already been written. Let’s try to insert the same element on the page again.

To insert elements into the page, we will use the appendChild method. It adds the specified node to the end of the parent element. We already worked with this method here.

In the code, you can access a child element in the card using element.children[0].

This is the normal approach for our case. The layout will not change in this task and the next three tasks, and we know for sure that we need the first child element. And since children is a collection that is similar to an array, we can access the first child element by index.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cloning elements</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="pool"> <div class="el"> <span>1</span> </div> <div class="el"> <span>2</span> </div> </div> <template id="element-template"> <div class="el"> <span></span> </div> </template> <script src="script.js"></script> </body> </html>

CSS

.pool { display: flex; flex-wrap: wrap; min-height: 330px; margin: 20px; padding: 10px; background-color: #e9e9f0; } .el { display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; margin-right: 10px; margin-bottom: 10px; box-sizing: border-box; border: 20px solid #3366ff; background-color: #99b2ff; color: rgba(255, 255, 255, 0.9); font: bold 60px "Arial", sans-serif; text-align: center; } .el--green { background-color: #a3d095; border: 20px solid #518d3f; }

JavaScript

// Cards container var pool = document.querySelector('.pool'); // Get the card template var template = document.querySelector('#element-template').content; var element = template.querySelector('div'); // Add text content to the span element.children[0].textContent = 86; // Add an element to the end of the pool block pool.appendChild(element); // Uncomment the block below // var newElement = document.createElement('div'); // newElement.classList.add('el'); // newElement.classList.add('el--green');

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

Goalscompleted

Uncomment the block where the new element (newElement) is created.
Add newElement to the end of the pool block using appendChild.
On the next line, add element to the end of pool. Pay attention to the position of the elements in the block.

Cloning and inserting elements, part 1

Comments

Log in

Sign up

Restore access