In this article, we are creating image elements with JavaScript.

Our hypothetical case for this chapter is about maintaining a modern, relevant design. Some websites might look outdated because of the lack of modern design elements. Large hero images can give your website a boost in that aspect.

Business case: Creating image elements

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that users don’t feel secure while shopping on a sketchy website, we expect that adding large hero images will cause an increase in sales. We’ll measure this using conversion-rate”

To test this hypothesis, we’re going to apply the changes below:

Code

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

//variables
var imageParent = document.querySelector(".entry-content");
var imageAnchor = document.createElement("a");
var newImage = document.createElement("img");

//attributes
newImage.setAttribute("src", "https://picsum.photos/580");
newImage.setAttribute("alt", "Just a random image");
newImage.setAttribute("width", "580");
newImage.setAttribute("height", "580");
imageAnchor.setAttribute("href", "/");

//styling
imageAnchor.style.display = "block";
newImage.style.margin = "0 auto 15px auto";

//inserting
imageAnchor.appendChild(newImage);
imageParent.prepend(imageAnchor);

Logic

//variables

In the first line of code, we create a comment section for the variables.

var imageParent = document.querySelector(".entry-content");

In this section, we start by assigning the parent location of our future image. We will use this, to insert the image on the page. 

We do this by selecting the element with the querySelector method. We can select the element by inserting the class as the argument. We assign the selected element to the newly declared imageParent variable.

var imageAnchor = document.createElement("a");

To make the image clickable we will need to create an anchor element. 

We do this by passing down a string in the createElement method. We assign this element to the newly declared imageAnchor variable.

var newImage = document.createElement("img");

Next up is the image element. 

We need to use the createElement method and assign the result to the newly declared newImage variable.

//attributes

Now that we have the variables declared, we need to give them some attributes. We open up a comment section for this.

newImage.setAttribute("src", "https://picsum.photos/580");

We need to set the source of the image element in order to show the picture we want. This can be done with the setAttribute method. 

The first argument is telling the method to add the src attribute. The second argument contains the value. This is the url to the image.

newImage.setAttribute("alt", "Just a random image");

The image also needs an alt attribute for screen readers. We can use the same method for this attribute.

newImage.setAttribute("width", "580");
newImage.setAttribute("height", "580");°

You can set the width and height of the image for older browsers using the same setAttribute method.

imageAnchor.setAttribute("href", "/");

The anchor needs the URL value for the href attribute so the user can click the image. This example takes the user back to the homepage.

//styling

We open up a comment section for the styling.

imageAnchor.style.display = "block";

We need the anchor to have this value to make sure it doesn´t ignore the layout.

newImage.style.margin = "0 auto 15px auto";

We add some margin around the image to make it look prettier.

//inserting

We open up the last comment section for inserting elements.

imageAnchor.appendChild(newImage);

In this line, we insert the image as a child of the anchor element.

imageParent.prepend(imageAnchor);

Finally, we prepend the anchor element with the image in the DOM.