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>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>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