Interactive online courses HTML Academy
2026-03-09 14:07 Diff
https://htmlacademy.org/courses/javascript-browser/browser-intro/add-image

Our card does not have a picture of the product. Let’s create it with makeElement, transferring the 'img' tag name and 'product__image' class to the function. We are not going to transfer the third parameter, because the image has no text content.

To make the picture appear on the page, we need to specify the image file address, that is, the value of the src attribute. The value of this attribute can be managed using the property of the DOM element with the same name:

var picture = document.createElement('img'); picture.src = 'images/picture.jpg'

In the same way, we will add an alternative text to the image, that is, a description of the photo. If the photo does not load, the page will display this text so that the user understands what kind of block they are looking at. In addition, this text is recognized by the electronic reader; that is why, when adding this description, we just make the interface element available in a user-friendly way. Add alternative text using the alt property. As you can see, the names of tag attributes and properties of DOM elements are often (but not always) the same.

picture.alt = 'Unsinkable selfie stick';

After creating the image and setting its properties, add the image to the card. Please note, we must add the photo before the product price, because the order of the tags is exactly like this in the layout. Therefore, the code for creating a picture needs to be added before the price creation code.