Changing element hierarchy

Our hypothetical case for this chapter is about changing the element hierarchy in the DOM. Our client’s research showed that the visual hierarchy should follow the information hierarchy. 

Prefer video?

Check out the guide from my YouTube channel.

YouTube video player

Business case: Changing element hierarchy

We use this insight to create a testing hypothesis:

“Because we saw that our elements don’t follow the information hierarchy, we expect that changing the visual hierarchy will cause an increase in sales. We’ll measure this using conversion-rate.”

We are going to test this hypothesis with the following change: 

Changing the element hierarchy with JavaScript to 1-2-3
The order is now 2-3-1, want it to be 1-2-3

Code

We will execute this change by running the following JavaScript code on the testing page. Try it out for yourself to see how it works!

var block1 = document.querySelector(".block1");
var block3 = document.querySelector(".block3");
function moveUp(element) {
  if (element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}
function moveDown(element) {
  if (element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}
moveDown(block3);
moveUp(block1);

Breakdown

var block1 = document.querySelector(".block1");

In the first line of code, we declare the variable called “block1” and assign an element to it. We select the penguin with the number 1 on its belly using the querySelector method. I gave each of the penguins a corresponding class, so they are easy to select.

var block3 = document.querySelector(".block3");

In the second line of code, we declare the variable called “block3” and assign an element to it. We select the penguin with the number 3 on its belly using the querySelector method.

Both variables get a penguin block assigned
Both variables get a penguin block assigned
function moveUp(element) {
  if (element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}

Our scripts’ first function moves elements up in the DOM within the same level if a sibling in that direction exists. The if statement in this function checks if a previous element exists and then runs the code that switches the elements.

The function is ready to move any selected element one up
The function is ready to move any selected element one up
function moveDown(element) {
  if (element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}

The second function of our script does almost the same as the first function. This function moves elements down in the DOM if an element in that direction exists. It can now be called.

The function is ready to move any selected element one down
The function is ready to move any selected element one down
moveDown(block3);

The first function calls the moveDown function with the block3 variable as the argument. This function will move the penguin with the number 3 on its belly one down.

We started with 2-3-1, now we have 2-1-3
We started with 2-3-1, now we have 2-1-3
moveUp(block1);

The second function calls the moveUp function with the block3 variable as the argument. This function will move the penguin with the number 1 on its belly one up. After this function, we have the element hierarchy that we want.

Now we have the desired result
Now we have the desired result

Write a comment