Remove and Restore Div = Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' [closed]

On my web page I have two divs, one of which will appear depending on the screen size.

<div id="screenSmall" style=""><!--#include file="mobAccordion.asp" --></div> <div id="screenLarge" style=""><!--#include file="canvasHTML5.asp" --></div>

I have javascript that will, onload, Remove one of the divs depending on screen size:

<script> function handleScreenSize() { const isSmall = window.matchMedia("(max-width: 599px)").matches; const largeDiv = document.getElementById("screenLarge"); const storedlargeDiv = document.getElementById("screenLarge"); //largeDiv; const smallDiv = document.getElementById("screenSmall"); const storedsmallDiv = document.getElementById("screenSmall"); // smallDiv; const parentElement = document.body; if (isSmall) { // Screen is less than 600px: remove the large div if (largeDiv) largeDiv.remove(); document.body.appendChild(storedsmallDiv); } else { // Screen is 600px or more: remove the small div if (smallDiv) smallDiv.remove(); document.body.appendChild(storedlargeDiv); } } // Run immediately on page load handleScreenSize(); // Optional: Run whenever the window is resized //window.addEventListener("resize", handleScreenSize); //window.addEventListener('resize', handleScreenSize.bind(this)); window.addEventListener('resize', () => this.handleScreenSize()); </script>

When the screen is resized, the divs are not toggled as intended by my script. Resizing the window removes the first displayed div and thus no divs are visible.

Instead I get the error Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Does that error mean storedsmallDiv and storedlargeDiv must be a Node? How would I make them a Node?

Thanks.