Javascript dom exercise, here in when i add "di" variable for other div the paragrah and heading are not getting displayed


#1
<html>
    <body>
        <h1>
            the title
        </h1>
        <div id="container"></div>
    </body>
    <script>
        const container=document.querySelector('#container');
        const content=document.createElement('div');
        content.classList.add('content');
        content.textContent='This is glorious text content';
        container.appendChild(content);
        const para=document.createElement('p');
        para.textContent="this is para!!"
        para.style.cssText='color:red';
        container.appendChild(para);
        const head3=document.createElement('h3');
        head3.textContent='I\'m heading 3';
        head3.setAttribute('style','color:blue');
        container.appendChild(head3);
        const di=document.createElement('div');
        di.classList.add('seconddiv')
        di.setAttribute('style','border:5px solid black');
        di.setAttribute('style','background-color:pink');
        di.setAttribute('id','2');
        container.appendChild(di);
        const para2=createElement('p');
        para2.textContent='me too!';
        di.appendChild(para2);
        const head1=document.createElement('h1');
        head1.textContent="i'm in div";
        di.appendChild(head1);
        
        

    </script>
</html>

#2

The issue is this line. It should be document.createElement