Entonces tengo este código html que estoy tratando de replicar usando la manipulación dom

 <h1 id="intro-text"> HAMADILYTICAL<span id="word">Grill</span> </h1>

Tengo algunos estilos para ese lapso específico para que no se represente en la misma línea. Esto es lo que intenté pero obviamente no va a funcionar porque estoy agregando el niño después de ese nodo que no está dentro de él.

 // main content const mainContent = document.createElement('div'); const introText = document.createElement('h1'); const span = document.createElement('span'); mainContent.className = 'main-content'; introText.id = 'intro-text'; span.id = 'word'; introText.textContent = `HAMADILYTICAL Grill`; content.appendChild(mainContent); mainContent.appendChild(introText); introText.appendChild(span);