时间戳

首页 > 解决方案 > Node.appendChild：参数1在纯JS中没有实现接口Node

javascript - Node.appendChild：参数1在纯JS中没有实现接口Node

问题描述

我正在尝试创建一个带有列表的表单。该按钮负责向表单中的列表添加一个新元素。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>

还有我的 JS 代码：

        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
        }

我的应用程序渲染得很好，但是当我单击按钮时，我得到了这个错误：

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

此错误指向包含此代码的行：

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

我能做些什么来防止这个错误发生？

标签： javascriptappendchild

解决方案

您应该通过在函数名称后指定括号来调用该函数：

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

此外，由于您在页面加载时已经有一个列表项，您应该将大小增加 1：

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

演示：

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>

推荐阅读