Fetched with fetch(), but can't display it with DOM API (help)

Get Help JavaScript
#1

I have an exam tomorrow, so if anyone could help me with this problem, I’d be very thankful.
The thing is I fetch the data with fetch() API, then inside .then I have a function to only select names and emails, create <li> elements, change some inner HTML, and then try to append the object which contains all <li> elements to <ul> element. But although the DocumentFragment object called “list” looks fine when I check it with console.log(), it just doesn’t seem to work.
Here is the code, it’s pretty straight-forward.
https://codepen.io/firmus/pen/abqxMBZ
When I do the same thing, but without the fetch API, “list” object looks the same to me, and it works. So I don’t understand where is the problem. This is the same code but without fetch():
https://codepen.io/firmus/pen/YzeMgpr
Thank you all in advance!

#2

try moving all of that into the .then( )

fetch(url)
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        let authors = data;
        authors.forEach(mapAuthors);  
        // mapAuthors function creates an li, adds it to list Document fragment
        ul.appendChild(list);
    })
    .catch(function (error) {
        console.log(error);
    });

Also, I changed .map to .forEach because you don’t need the array that .map returns.