JavaScript调用appendChild时报参数非Node类型TypeError错误

appendChild 是DOM节点专属的插入方法，要求传入的参数必须是Node类型的真实DOM对象，原代码中li是拼接得到的HTML格式字符串，不属于DOM节点，因此触发类型错误。

写法1（推荐，无XSS风险） #

通过createElement创建真实li节点，设置文本后插入：

document.getElementById('myButton').onclick = function () {
  const inputVal = document.getElementById('toDo').value.trim();
  // 拦截空输入，避免生成空列表项
  if (!inputVal) return;
  // 创建真实li DOM节点
  const li = document.createElement('li');
  // 用textContent赋值，自动转义特殊字符，避免XSS风险
  li.textContent = inputVal;
  document.getElementById('list').appendChild(li);
  // 清空输入框
  document.getElementById('toDo').value = '';
}

写法2（直接插入HTML字符串） #

如果习惯写HTML字符串，替换appendChild为支持字符串插入的insertAdjacentHTML方法即可：

document.getElementById('myButton').onclick = function () {
  const inputVal = document.getElementById('toDo').value.trim();
  if (!inputVal) return;
  const liStr = `<li>${inputVal}</li>`;
  // beforeend表示在ul元素内部的末尾位置插入内容
  document.getElementById('list').insertAdjacentHTML('beforeend', liStr);
  document.getElementById('toDo').value = '';
}

注意：第二种写法直接拼接用户输入插入HTML存在XSS安全隐患，如果是面向公网的正式项目优先选择第一种写法。

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