Moving a static HTML element into a dynamically created element with JavaScript.

ZediWards — Wed, 30 Jun 2021 01:59:27 +0000

Context:

I was building a series of modals that open separately when their corresponding button was clicked. Each modal was split in two parts. The left side was a SVG of a tank, and the right, a form with some inputs and a update button.

The tank's SVG fill gradient would change depending on the inputs entered in the form to its right.

I was coding all of this out in Javascript, using ALOT of

document.createElement // Practicing my DOM skills :)

When it came time to recreate the SVG in JavaScript, it became a bit much. Especially since I had six to do.

Solution

HTML & CSS

Code the SVG inside the HTML parent that the dynamically created modal will be appended to later.
- The SVG being placed inside the modals parent will make it easier to traverse the DOM later and place it inside the modal.
Add a CSS class of hidden to the SVG element.

.hidden {
  display: none;
}

JavaScript

On the lines after I created the modal

Grab the SVG by its class name
Grab the element that will be the SVGs new parent
- target it by traversing the DOM in relation to the SVG elements current location
Append the SVG to the new parent
Remove the hidden class

const svg = document.querySelector(`svg-tank-1`);
const svgLocationTarget = svg.nextElementSibling.children[2].children[0].children[1];
svgLocationTarget.appendChild(svg);
svg.classList.remove("hidden");

TADA!!!