删除除文本之外的所有 HTML 元素

Question

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 class="content"> <h2 id="text"></h2> </div> </section>

Answer 1

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 class="content"> <h2 id="text"></h2> </div> </section>

Answer 2

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 class="content"> <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