0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We have the data that we need to create a new task. We know when we can add the task to the page. All that we have left to do is to figure out exactly how we can add a new element.</p>
1
<p>We have the data that we need to create a new task. We know when we can add the task to the page. All that we have left to do is to figure out exactly how we can add a new element.</p>
2
<p>We have already created new elements using createElement, but this method is long. First we need to create an element and assign it a class and attributes. Then we need to create child elements and to embed them in their parent element, and finally we have to draw them on the page.</p>
2
<p>We have already created new elements using createElement, but this method is long. First we need to create an element and assign it a class and attributes. Then we need to create child elements and to embed them in their parent element, and finally we have to draw them on the page.</p>
3
<p>It would be convenient if all of the required markup for the future elements was already stored somewhere. All that we have left to do is tweak the content for each element. And this can be done using the template tag.</p>
3
<p>It would be convenient if all of the required markup for the future elements was already stored somewhere. All that we have left to do is tweak the content for each element. And this can be done using the template tag.</p>
4
<p>It contains the template for future elements. The template tag is located in the same place where all the rest of the site markup is, only its content is not displayed on the page. Our markup also contains the template. It stores the template markup of the new task.</p>
4
<p>It contains the template for future elements. The template tag is located in the same place where all the rest of the site markup is, only its content is not displayed on the page. Our markup also contains the template. It stores the template markup of the new task.</p>
5
<p>In order to obtain the template in JavaScript, you can search for it by tag name, such as, for example, using querySelector('template'). There is a downside to this method: there might be a lot of templates on the page. Usually each template tag is assigned a unique name, and they are written to the id (identifier) attribute. The values of this attribute cannot be repeated on the same page. You can find the desired template by its id.</p>
5
<p>In order to obtain the template in JavaScript, you can search for it by tag name, such as, for example, using querySelector('template'). There is a downside to this method: there might be a lot of templates on the page. Usually each template tag is assigned a unique name, and they are written to the id (identifier) attribute. The values of this attribute cannot be repeated on the same page. You can find the desired template by its id.</p>
6
<p>The template in the markup:</p>
6
<p>The template in the markup:</p>
7
<body> … <template id="text-template"> <p class="text"></p> </template> </body><p>Searching for an element in JavaScript:</p>
7
<body> … <template id="text-template"> <p class="text"></p> </template> </body><p>Searching for an element in JavaScript:</p>
8
document.querySelector('#text-template');<p>The hashtag in the querySelector parameter indicates that you need to search by id.</p>
8
document.querySelector('#text-template');<p>The hashtag in the querySelector parameter indicates that you need to search by id.</p>
9
<p>Our template has the task-template ID. Find this template and output the tag contents to the page.</p>
9
<p>Our template has the task-template ID. Find this template and output the tag contents to the page.</p>
10
<p>There is also another method in the DOM API that allows you to search for elements by their ID: getElementById. In contrast to other methods, it can be called only across the entire document. It cannot be called for individual elements. We will learn more about this method in future courses when we practice searching for elements by id using querySelector. If you would rather not wait to learn more about the new method, you can read about it on <a>MDN</a>.</p>
10
<p>There is also another method in the DOM API that allows you to search for elements by their ID: getElementById. In contrast to other methods, it can be called only across the entire document. It cannot be called for individual elements. We will learn more about this method in future courses when we practice searching for elements by id using querySelector. If you would rather not wait to learn more about the new method, you can read about it on <a>MDN</a>.</p>