I'm happy I've gotten this far. I can grab a template, modify it, then append it to my document. But, why don't I see the entire HTML structure in the console when I try to output my <template>?

Conceptually, I understand I'm dealing with a document fragment in some capacity... Still, my expectation was to see the fragment's structure:

My Templates:

function basicModal() {
    
    const template = document.createElement('template');
    template.innerHTML = `
    <div id="someModal" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
    </div>`;

    console.log('--basic modal template', template)
    console.log('--basic modal template content', template.content)

    return template.content;

}


export { basicModal };

Modal Handler

import { basicModal } from './templates.js';

function renderRetireeForm() {

    const myTemplate = basicModal();
    console.log('--myTemplate', myTemplate)
    
    myTemplate.querySelector('.modal').setAttribute('id', 'zzzModal')

    document.body.appendChild(myTemplate);

    // i open it later

}