According to html my lists should appear after the sentence 'I love mozilla' because it's [1]: https://i.stack.imgur.com/J2i0Q.png but it appears at the end of my html. I recently added this code for making that after clicking 'add more' I can add lists. This problem then arised. How should I change my javascript to do that? (Thanks for your effort in advance)
const list = document.querySelector('.xususiyyet')
const addMore = document.querySelector('.addList')
document.body.appendChild(list);
addMore.addEventListener('click', () => {
const listItem = document.createElement('li');
const listContent = prompt('What else can be added to my list?');
listItem.textContent = listContent;
list.appendChild(listItem);
});<p>i love mozilla because it's</p>
<ul class="xususiyyet">
<li>safe</li>
<li>fast</li>
<li>reliable</li>
</ul>
<p> and open source browser. Click on <strong class="addList">add more</strong> for adding your reasons.</p>
<img src="images/firefox-logo.png" alt="Firefox logo">