HTML Diff
0 added 0 removed
Original 2026-01-01
Modified 2026-03-09
1 <p>The card is already in the layout, but so far it is empty. Let’s start adding content to it. First of all, we’ll add the name of the product and its price.</p>
1 <p>The card is already in the layout, but so far it is empty. Let’s start adding content to it. First of all, we’ll add the name of the product and its price.</p>
2 <p>The algorithm is almost the same as when adding the card: creating an element, adding a class,<em>inserting text content</em>(product name and price), adding the element to the end of the card. All steps are familiar to us, except adding text. How do we do it?</p>
2 <p>The algorithm is almost the same as when adding the card: creating an element, adding a class,<em>inserting text content</em>(product name and price), adding the element to the end of the card. All steps are familiar to us, except adding text. How do we do it?</p>
3 <p>Each DOM element has a textContent property. It contains the text content of the element. textContent does not get any layout, only text.</p>
3 <p>Each DOM element has a textContent property. It contains the text content of the element. textContent does not get any layout, only text.</p>
4 // HTML &lt;p&gt;I am &lt;em&gt;a text element&lt;/em&gt;.&lt;/p&gt; // JS var p = document.querySelector('p'); console.log(p.textContent); // Logs 'I am a text element.'<p>This is an object property that can not only be read but also written or rewritten. Therefore, if we want to assign text content to an element, it is enough to write the necessary value in the property.</p>
4 // HTML &lt;p&gt;I am &lt;em&gt;a text element&lt;/em&gt;.&lt;/p&gt; // JS var p = document.querySelector('p'); console.log(p.textContent); // Logs 'I am a text element.'<p>This is an object property that can not only be read but also written or rewritten. Therefore, if we want to assign text content to an element, it is enough to write the necessary value in the property.</p>
5 p.textContent = 'Now I have new contents.'; console.log(p.textContent); // Logs 'Now I have new contents.' // In HTML, the tag content will change &lt;p&gt;Now I have new contents.&lt;/p&gt;<p>Add product name and its price to the card. Make sure that all new elements are displayed on the page.</p>
5 p.textContent = 'Now I have new contents.'; console.log(p.textContent); // Logs 'Now I have new contents.' // In HTML, the tag content will change &lt;p&gt;Now I have new contents.&lt;/p&gt;<p>Add product name and its price to the card. Make sure that all new elements are displayed on the page.</p>