Add/move/change content on store pages

Hey forum! My client has been asking for a lot of customization involving moving things around on the page, or adding new content. I've been able to resolve all their requests using code injection by creating new nodes or duplicating existing ones and attaching them to elements in the DOM. While it's working fine, I'm wondering if it's the best way to accomplish this in Squarespace 7.1.

I can't share the site password on the forum, as my client doesn't want to have their work out in the wild quite yet, even in a closed circle like this, but I can share a representative example, with three edits that all use code injection/custom CSS.

1. Category title moved from its usual location at the top of the content section to inside the products container
2. New text added, based on the category title
3. Custom "all" link, to a category called "all" - the actual "all" link is hidden using CSS

Please excuse the messy JS - I want to make sure it's worth keeping before making it elegant. This is the code for 1 & 2:

const artistDescriptions = {
  "judycade": "it’s all about the daydream",
  "kevinhearn": "a wild variety of characters from an imagined world",
  "hughmarsh": "i like noize, organized or otherwize",
  "kurtswinghammer": "This is Kurt's description.",
  "martintielli": "ROCK n’ ROLL AND Pen ‘n Ink"
}

const artistTitleText = document.querySelector('.nested-category-title').textContent.trim();
const artistDescriptionKey = artistTitleText.replace(' ', '');
const artistDescriptionText = artistDescriptions[artistDescriptionKey];
console.log(artistDescriptions);
console.log(artistDescriptionText);
const productsContainer = document.querySelector('.products-flex-container');
const artistHeader = document.createElement('div');
artistHeader.classList.add('artistHeader');
const artistTitle = document.createElement('h2');
artistTitle.textContent = artistTitleText;
const artistDescription = document.createElement('p');
artistDescription.textContent = artistDescriptionText;
artistTitle.classList.add('artist-title');
artistHeader.append(artistTitle);
artistHeader.append(artistDescription);
productsContainer.prepend(artistHeader);

My questions:

1. Is this the best way to pull this off?
2. Is there a way to do this that makes it possible for the client to edit the content in 2?

Thanks for any advice.

Please see the following for code that is similar to what I think you are trying to do.

Several folks are using it successfully.

One thing that is problematic with any kind of custom JavaScript code is that normal folks aren't JS programmers and often have issues with syntax when entering in new data in JS. With enough instructions most folks can get the data entered correctly but there is always that chance that something will go wrong.

One thing I've been doing with my code, where possible, is to get the code settings out of JS code. Once the JS code is installed they don't have to go into that code again, reducing the chance of a mishap with the main code itself.

I put the settings into a code block with a custom tag and pull the settings out of it. It does add some overhead to the code to deal with parsing things.

Thank you @Lesum and @creedon for your responses. Yes, I foresee some trickiness with content updates, and would love to avoid that as much as possible. It sounds like I'm working with the best option that doesn't involve installing new stuff, so for the time being I'm going to go with what I have, but am very excited to learn about twcsl, and will likely set up your plugin, @creedon, in the not-too-distant future.