Firestore/Javascript: Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': 1 argument required, but only 0 present

Question

I am currently following this tutorial and followed it exactly but tweaked it to my coding style.

What I want to happen is to display certain fields of a uid in a firestore sub-collection named patients to my web page. But I keep getting the error

Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': 1 argument required, but only 0 present

Which is a completely contradicts the expected output shown on the tutorial.

Here is my code:

        <div class="card">
            <div class="card-body text-center">
                <div class="card-body text-left">
                    <script>
                        firebase.auth().onAuthStateChanged(user => {
                        if(user){
                            this.userId = user.uid;
                        } //stores the user id in variable
                        const patientNames = document.querySelector('#patientList');

                        function renderPatientList(doc){
                            //var
                            let li = document.createElement('li');
                            let firstName = document.createElement('span');
                            let lastName = document.createElement('span');
                            let sex = document.createElement('span');


                            li.setAttribute('data-id', doc.id);
                            firstName.textContent = doc.data().firstName;
                            lastName.textContent = doc.data().lastName;
                            sex.textContent = doc.data().sex;

                            li.appendChild(firstName);
                            li.appendChild(lastName);
                            li.appendChild(sex);

                            patientNames.appendChild();
                        }
                            console.log(userId);
                            let userRef1 = firebase.firestore().collection("users").doc(userId).collection("patients");
                            return userRef1.get()
                            .then(function(querySnapshot) {
                                querySnapshot.forEach(function(doc) {
                                    // doc.data() is never undefined for query doc snapshots
                                    console.log(doc.id, " => ", doc.data());
                                    renderPatientList(doc);
                                });
                            });
                        });
                    </script>
                    <div>
                        <ul class id="patientList"></ul>
                    </div>
                </div> 
            </div>

this is the code that is being thrown back as an error at me patientNames.appendChild();

Answer 1

Sorry about that, but I already figured it out! I forgot to pass li to patientNames.appendChild(); that's the answer if anyone still has the same problem!

patientNames.appendChild(li); should be the expected argument!