whole code

With Javascript I want to remove all current Elements on the Screen exept the text and it's CSS styles. My end goal is that I can essentially exchange the text "Bubble" with "Bounce" and still have the same CSS styling in the end. But as I also need to remove ALL Elements from the screen to run the next code I need to clear out the body and CSS entirely. This leads to my Problem. I dont know how to either get the same CSS styling back after clearing it out nor how to exclude the CSS Styling from the clearing. Can anybody help?

document.getElementById("text").innerHTML = "Bubble";

document.addEventListener("click", next);
function next() {
          document.head.innerHTML = " ";
            document.getElementById("text").innerHTML = "Bounce";
}

section {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #1F69FA;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        content {
            min-width: 100%;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0
        }
        section h2 {
            font-size: 10em;
            color: #333;
            margin: 0 auto;
            text-align: center;
            font-family: consolas;
        }

<section>
        <div >
            <h2 id="text"></h2>
        </div>
    </section>

CodePudding user response：

If you really need to call document.head.innerHTML = " "; this is one way to do it :

I created a function called add_css() which adds the CSS (which is now stored in a variable) in a style tag in the head of document.

Also your CSS had a typo (content instead of .content)

document.getElementById("text").innerHTML = "Bubble";
const css_to_keep = `section {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #1F69FA;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .content {
            min-width: 100%;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0
        }
        section h2 {
            font-size: 10em;
            color: #333;
            margin: 0 auto;
            text-align: center;
            font-family: consolas;
        }`;

document.addEventListener("click", next);
add_css();
function next() {
          document.head.innerHTML = " ";
          add_css();
          document.getElementById("text").innerHTML = "Bounce";
}
function add_css(){
  const style_elem = document.createElement('style');
  document.head.appendChild(style_elem);
  style_elem.type = 'text/css';
  style_elem.appendChild(document.createTextNode(css_to_keep));
}

<section>
        <div >
            <h2 id="text"></h2>
        </div>
    </section>

CodePudding user response：

You don't need to "remove" anything - just replace the innerHTML of the document body with a new updated section.

// A function that returns a string
// (See template strings below)
function createSection(text) {
  return `
    <section>
      <div >
        <h2 id="text">${text}</h2>
      </div>
    </section>
  `;
}

document.body.innerHTML = createSection('Bubble');
document.addEventListener('click', next);

// Replace the body HTML with the new section
function next() {
  document.body.innerHTML = createSection('Bounce');
}

section{width:100%;height:100vh;overflow:hidden;background:#1f69fa;display:flex;justify-content:center;align-items:center;flex-direction:column}content{min-width:100%;max-width:100%;margin-left:auto;margin-right:auto;text-align:center;position:absolute;left:0;right:0}section h2{font-size:10em;color:#333;margin:0 auto;text-align:center;font-family:consolas}

Additional documentation

• Template/string literals