I have the follwing script which I believe should be appending the ordered list of sections to the bottom of the existing html body. But instead it is replacing it. Why?

// Get all the sections
const sections = document.querySelectorAll('section.sections');

// Convert NodeList to an array for easier sorting
const sectionsArray = Array.from(sections);

// Sort sections based on the numeric value in their IDs
sectionsArray.sort((a, b) => {
    const idA = parseInt(a.id.replace('section', ''));
    const idB = parseInt(b.id.replace('section', ''));
    return idA - idB;
});

// Create a container to append the sorted sections
const container = document.createElement('div');

// Append sorted sections to the container
sectionsArray.forEach(section => {
    container.appendChild(section);
});

// Replace the original sections container with the sorted container
document.querySelector('body').appendChild(container);