
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.
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:

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.

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.

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.

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.

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.
