Node.appendChild: Argument 1 does not implement interface Node in pure JS

Question

I'm trying to create a form with a list. The button is responsible for adding a new element to the list in the form. HTML:

<form id="newBrand">
        <fieldset>
            <ul id="formCars">
              <li>
                <legend>Car 1</legend>
                <label>Name
                    <input type="text" name="carName1" />
                </label>
              </li>
            </ul>
        </fieldset>
        <button type="button" id="addCar">+</button>
</form>

And there is my JS code:

        const form = document.getElementById('newBrand');
        const formCars = document.getElementById('formCars');  
        const addCarBtn = document.getElementById('addCar');
        addCarBtn.addEventListener('click', () => formCars.appendChild(createBrandCar));

        function createBrandCar() {
            const result = document.createElement('li');
            let size = formCars.getElementsByTagName('li').length;
            result.innerHTML = `
                <legend>Car ${size}</legend>
                <label>Name
                    <input type="text" name="carName${size}" />
                </label>`;
            return result
        }

My application renders fine, but when I click the button then I get this error:

Uncaught TypeError: Node.appendChild: Argument 1 does not implement interface Node.

This error points to a line that contains this code:

addCarBtn.addEventListener('click', () => formCars.appendChild(createBrandCar));

What can i do to prevent this error from occurring ?

Answer 1

You should invoke the function by specifying the parenthesis after the function name:

addCarBtn.addEventListener('click', () => formCars.appendChild(createBrandCar()));

Also, since you have already one list item on page load you should increment the size by 1:

let size = ++formCars.getElementsByTagName('li').length;

Demo:

const form = document.getElementById('newBrand');
const formCars = document.getElementById('formCars');  
const addCarBtn = document.getElementById('addCar');
addCarBtn.addEventListener('click', () => formCars.appendChild(createBrandCar()));

function createBrandCar() {
    const result = document.createElement('li');
    let size = ++formCars.getElementsByTagName('li').length;
    result.innerHTML = `
        <legend>Car ${size}</legend>
        <label>Name
            <input type="text" name="carName${size}" />
        </label>`;
    return result
}

<form id="newBrand">
    <fieldset>
        <ul id="formCars">
          <li>
            <legend>Car 1</legend>
            <label>Name
                <input type="text" name="carName1" />
            </label>
          </li>
        </ul>
    </fieldset>
    <button type="button" id="addCar">+</button>
</form>