JavaScript新手求助：appendChild调用报错Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Hey there! No worries at all—we all start somewhere, and this is a super common gotcha when you're just getting the hang of DOM manipulation. 😊

问题原因 #

你遇到的报错是因为在ulElement.appendChild('li')这一行，你传入的是字符串'li'，而不是你之前用document.createElement('li')创建的实际DOM节点变量li。appendChild()方法要求必须传入一个Node类型的对象，字符串不符合要求，所以浏览器抛出了错误。

另外，你创建了文本节点texNode，但还没有把它添加到li元素里，就算解决了第一个问题，你的li项也会是空的哦。

修正后的代码 #

const incrementBtn = document.querySelector('#increment')
const decrementBtn = document.querySelector('#decrement')
const counterEl = document.querySelector('#counter')
const ulElement = document.querySelector('#list-items')
let counter = 0

function incrementCounter() {
 counter ++
 counterEl.innerText = counter
 // create element
 const li = document.createElement('li')
 const texNode = document.createTextNode('sentence '+ counter)
 // 先把文本节点添加到li里
 li.appendChild(texNode)
 // 再把li节点添加到ul中（注意这里传的是变量li，不是字符串'li'）
 ulElement.appendChild(li)
}

function decrementCounter() {
 counter --
 counterEl.innerText = counter
}

incrementBtn.addEventListener('click', incrementCounter)
decrementBtn.addEventListener('click', decrementCounter)

额外小优化 #

其实你可以不用手动创建文本节点，直接用textContent属性给li设置内容，代码会更简洁：

function incrementCounter() {
 counter ++
 counterEl.innerText = counter
 const li = document.createElement('li')
 li.textContent = 'sentence ' + counter
 ulElement.appendChild(li)
}

这样修改后，点击递增按钮就能正常添加带内容的li项啦！

内容的提问来源于stack exchange，提问作者izzka