0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>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.</p>
1
<p>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.</p>
2
<p>You can’t just take a single element and add it multiple times to the page. It can only be inserted once.</p>
2
<p>You can’t just take a single element and add it multiple times to the page. It can only be inserted once.</p>
3
<p>Let’s make sure of this by taking a look at an example.</p>
3
<p>Let’s make sure of this by taking a look at an example.</p>
4
<p>Let’s bring up a block with product listings. The template for the product listing is stored in the template tag.</p>
4
<p>Let’s bring up a block with product listings. The template for the product listing is stored in the template tag.</p>
5
<body> … <template id="element-template"> <div class="el"> <span></span> </div> </template> </body><p>The template has only been inserted in the page once. This code has already been written. Let’s try to insert the same template on the page again.</p>
5
<body> … <template id="element-template"> <div class="el"> <span></span> </div> </template> </body><p>The template has only been inserted in the page once. This code has already been written. Let’s try to insert the same template on the page again.</p>
6
<p>To insert elements into the page, we will use the appendChild method. It adds the specified elements<b>to the end</b>of the parent block. We already worked with this method<a>here</a>.</p>
6
<p>To insert elements into the page, we will use the appendChild method. It adds the specified elements<b>to the end</b>of the parent block. We already worked with this method<a>here</a>.</p>
7
<p>In the code, you can discover a call to a child element in the template using the element.children[0].</p>
7
<p>In the code, you can discover a call to a child element in the template using the element.children[0].</p>
8
<p>This is the normal approach for our case. The layout will not change for the next four 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 call the first child element by index.</p>
8
<p>This is the normal approach for our case. The layout will not change for the next four 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 call the first child element by index.</p>