Changing element hierarchy

Mar 12, 2021

Changing element hierarchy

By. Jeroen Wiersma

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:

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

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

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

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

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.