After replacing the element, none of the JavaScript suddenly works

So, I’m trying to make a page where you can essentially change it to what you want. And in order to make it useful, I need to make sure there is a way to save the edited codes and re-apply them. I used the jquery replaceWith and use local storage as the storing system.

//This is for applying it to the page
    let interactiveDiv = $("#interactiveDiv");
	let pageFormatSaved = localStorage.getItem("pageFormat");
	$(interactiveDiv).replaceWith(pageFormatSaved);
//this is to apply the saved page format to the page
function savePageFormat() {
	let x = document.getElementById("interactiveDiv");
	let newPageFormat = x.outerHTML;
	let g = localStorage.getItem("pageFormat");
	localStorage.key("pageFormat");
	localStorage.setItem("pageFormat", newPageFormat);
	console.log("added New Page Format");
}

Please help… I don’t know why it’s not working. Maybe you guys have any other suggestions to this approach, one that has fewer bugs on them?

What are the symptoms of it not working? What are you expecting to happen, and what is happening instead?

I expect it to do a lot of JavaScript…
If you want to check it out you can go here: https://joshuapelealu.github.io/WebDesign/interactive.html
All it’s supposed to do is on that page right now, but now it just won’t do any JavaScript. It’s for a small school project I have and I haven’t finished it yet as you can see.

This will run only once. If you need this to update as user types (I suppose), you need event listener that will invoke this function every keypress

You need innerHTML here as .replaceWith() replaces only inner HTML without touching the container

This looks like unused/unnecessary lines of code

Looks like someone’s already gotten to it, but I’ll need more than that in the future, for two reasons:

  1. I am incredibly lazy and would rather help people by eyeballing the code here instead of going out and testing it in a pen.
  2. Articulating the problem in words will very often lead to you realizing the problem’s cause. This is known as “rubber duck debugging” (i.e. describe your bug to a rubber duck)

Well, This function I only want to run once every time the user visits that page, not every time there is a change

When there is a change I used this function to save it

I put the function on every thing that will change the page.

and this part is the code I used to store the page code into the local storage so I can call it back later

Well, By

I meant none of the javascript runs after the replaceWith ran it. At first I thought maybe because it changed the page and the javascript already run that means it won’t find the DOM. But I tried to fix that problem by starting the rest of the javascript after the element replace is done

Alright, So I fixed it.

You were right not to touch the container. So, I grabbed the elements inside it and then remove the element inside the container and append the new one.