Reset DOM to original state after programmatic manipulation

JavaScript
#1

Hi!

I have made a function which does some manipulation to DOM, it’s going to be tied to if statement with a breakPoint.matches.

when the breakpoint gets triggered once again, for example when going back to desktop resolution, I need all DOM elements on their initial locations.

What’s the best way to do this?

function repositionHighwaySelectorForMobile() { 
  if (breakPoint.matches) {
  const highwayPicSelector = document.querySelector(
    ".highway__arrows_container"
  );
  const mobileTitleAndSelectorWrapper = document.createElement("div");
  const highwaySection = document.querySelector(".highway");
  const highwayTitle = document.querySelector(".highway__title");
  const highwayText = document.querySelector(".highway__text");
  const highwayArrowLeft = document.querySelector(".highway__arrow-left");
  const highwayArrowRight = document.querySelector(".highway__arrow-right");
  const highwayArrowLeftContainer = document.querySelector(
    ".highway__slider-button-left"
  );
  const highwayArrowRightContainer = document.querySelector(
    ".highway__slider-button-right"
  );

  mobileTitleAndSelectorWrapper.classList.add(
    "highway__title-and-selector-wrapper"
  );
  highwaySection.prepend(mobileTitleAndSelectorWrapper);
  mobileTitleAndSelectorWrapper.appendChild(highwayTitle);
  mobileTitleAndSelectorWrapper.appendChild(highwayPicSelector);
  mobileTitleAndSelectorWrapper.style.display = "flex";
  mobileTitleAndSelectorWrapper.style.flexDirection = "row";
  mobileTitleAndSelectorWrapper.style.justifyContent = "space-between";
  mobileTitleAndSelectorWrapper.style.alignItems = "center";
  mobileTitleAndSelectorWrapper.style.border = "1px solid red";

  highwayArrowLeft.src = "./images/small-arrow-left.svg";
  highwayArrowRight.src = "./images/small-arrow-right.svg";

  highwayArrowLeftContainer.style.width = "24px";
  highwayArrowLeftContainer.style.height = "24px";
  highwayArrowRightContainer.style.width = "24px";
  highwayArrowRightContainer.style.height = "24px";

  } else {
    ???
  }
}
#2

First off would be to use CSS for the styling instead of JavaScript… Is there a reason you’re using JS for this?

To answer your question, do what you’re doing but the opposite.

#3

@colinthornton the task includes changing positions of HTML elements, I don’t know how to do it with css.

I understand that I could just code everything with opposite methods, but perhaps there is a more elegant solution?

#4

Do you have a link to the instructions for your task? Are you only allowed to use JS or can you change the CSS and HTML as well?

If you’re using flex or grid, then you can change the placement of elements via order or grid-area. If you can change the HTML then you can have both the mobile and desktop elements in the DOM at all times, and swap between display: block; and display: none; via media queries.

#5

(I don’t think there’s an elegant solution if you can only use JS)

#6

assign a “css” class to it, and then in "if … else " block simply “add/remove” it

hope that helps, happy learning :slight_smile:

#7

@bappyasif thanks for your reply, but how do I assign a class to a bunch of DOM manipulations? please, explain.

#8

its pretty similar to what you are doing here, except you would use a different method (classList/className)to assign a “css class” to that element

try reading along this w3school hands on guide for this, happy reading :slight_smile: How To Add a Class Name