cuando llamamos a element.remove() , el elemento se elimina del DOM desde entonces y element.isConnected devolverá false . ¿Hay alguna función que revierta el método de remove y vuelva a colocar el elemento en su ubicación?

digamos que tengo tres elementos: html_area , css_area y js_area . su visualización es administrada individualmente por html_hider , js_hider , css_hider . cuando se hace clic en hider, necesito eliminar el área de DOM, también modifica la dimensión del contenedor. aquí está la cosa, quiero mantener esto en orden:

1. html
2. CSS
3. js

cuando se ocultan y muestran (anexados o eliminados) del DOM, quiero que se mantenga su secuencia. Lo codifiqué manualmente como:

 html_area.connect = () => container.prepend(html_area); css_area.connect = () => { if(!html_area.isConnected){ container.prepend(css_area); }else if(!js_area.isConnected){ container.append(css_area); }else{ container.insertBefore(css_area, js_area); } } js_area.connect = () => container.append(js_area); html_hider.onclick = () => { if(html_area.isConnected){ html_hider.classList.add('hide'); html_area.remove(); }else{ html_hider.classList.remove('hide'); html_area.connect(); } aMode(); } css_hider.onclick = () => { if(css_area.isConnected){ css_hider.classList.add('hide'); css_area.remove(); }else{ css_hider.classList.remove('hide'); css_area.connect(); } aMode(); } js_hider.onclick = () => { if(js_area.isConnected){ js_hider.classList.add('hide'); js_area.remove(); }else{ js_hider.classList.remove('hide'); js_area.connect(); } aMode(); }

no es robusto y será extremadamente complicado cuando los elementos y ocultadores se emparejen más de 3. ¿Hay alguna manera de revertir el método de remove y volver a colocar el elemento en su ubicación original?