Interactive rating component

Great exercise, but I had issues with the "you selected * out of 5" text:

At first, I tried to approach this by using JavaScript to create a <p> element called dynamicTextEl so it can then be appended to its parent through an event listener. I modified its inner HTML to add a new <span> element within the <p> element :

dynamicTextEl.innerHTML = "You selected <span id=\"dynamic-number\"></span> out of 5";

However, I wasn't able to access the new span element, never mind change its text content based on the rating that the user gives. When console.logging it (is that a word?), it appeared as "null", even though the new span element was already showing in the dev tools. This previous version can be viewed in the Initial commit in the GitHub repository.

At the end, I solved this by simply having the span element with its parent p element already in the HTML file, but with a display: none property in CSS. This property changes via JavaScript so that the text is visible when the user submits their rating. This way I could easily access the span element and change its attributes since it was already part of the HTML.

Nonetheless, I'd still like to know why my other approach did not work in the first place. Does it have something to do with the DOM not recognizing new elements created by changing another element's inner HTML or something similar? If so, why do we have the option to add new tags using this method?

Thanks in advance!