Con Javascript, quiero eliminar todos los elementos actuales en la pantalla, excepto el texto y sus estilos CSS. Mi objetivo final es que, esencialmente, pueda intercambiar el texto "Bubble" con "Bounce" y seguir teniendo el mismo estilo CSS al final. Pero como también necesito eliminar TODOS los elementos de la pantalla para ejecutar el siguiente código, necesito borrar el cuerpo y el CSS por completo. Esto lleva a mi Problema. No sé cómo recuperar el mismo estilo CSS después de borrarlo ni cómo excluir el estilo CSS del borrado. ¿Alguien puede ayudar?
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>Si realmente necesita llamar a document.head.innerHTML = " "; Esta es un forma de hacerlo :
Creé una función llamada add_css() que agrega el CSS (que ahora está almacenado en una variable) en una etiqueta de estilo en el encabezado del documento.
También su CSS tenía un error tipográfico ( content en lugar de .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>No necesita "eliminar" nada, simplemente reemplace el HTML interno del cuerpo del documento con una nueva sección actualizada.
// 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}Documentación adicional