Why does the H3 appear later than the Li

I am a bit confused over this. I created a function to attach a name and countries that the person is likely to belong to.

I attached the name to a div with id of ‘resultBox’ and the countries list to Ul. Despite that fact that the div comes first before the Ul, the countries ends up coming first before the name

Below is the image of the site, with the name appearing at the end, after the attached Li
image

Why is this so?

<div id = "resultBox">
    <ul></ul>
</div>

the ul is already there, appending li elements to the ul put them inside the ul element

appending to an element, add the element as last element
appending h3 to the div, means adding the h3 as last element of the div

1 Like